Комментарии 84
Вариант с лупой великолепен. Остальные мне не очень понравились.
+9
Очень интересно... Большое спасибо!
+1
А на css так слабо без скрипта сделать?
+2
Там в последнем варианте появляется надпись нажмите для Preview, но ведь маленькая картинка и есть превью, а при нажати будет уже оригинал а не превью. Или у меня проблема с английским?
+2
эх вы...
вставляете блочный элемент в строковый... нехорошо это. Всевидящие боги w3c покарают вас!
вставляете блочный элемент в строковый... нехорошо это. Всевидящие боги w3c покарают вас!
0
Простите, а зачем же скрипт? Не проще в стилях
a.preview span {display:none}
a.preview:hover span {display:block}
Или я чего-то не понял?
a.preview span {display:none}
a.preview:hover span {display:block}
Или я чего-то не понял?
+7
Что бы этот злополучный не добавлять ко всем картинкам руками — что и написано в самой статье. Читайте внимательней ;)
0
злополучный span*
Тег удалился :(
Тег удалился :(
0
НЛО прилетело и опубликовало эту надпись здесь
А там дело в том, что спаны там абсолютно позиционируются. Если в предложите метод удобной верстки со слоями, то тогда наверное так сделать будет лучше. Я уже думаю над этой проблемой)
0
Это надо дать почитать товарищам делающим фотохостинги в том числе и разработчикам пикасса.
0
Перенесите это в Веб-разработку.
+1
/* Очень практично оформлять кликабельные картинки, к примеру при наведении на картинку появится изображения говорящее о том что эта картинка кликабельна — как на картинке выше. */
спасибо за наводку. интересный приём.
спасибо за наводку. интересный приём.
0
иконка лупы хорошая, понравилось
0
НЛО прилетело и опубликовало эту надпись здесь
Слово "практично" здесь какое-то очень странное.
При наведении на кликабельную картинку меняется курсор, это однозначно и общедоступно говорит о её кликабельности, поэтому к практике все эти приседания не имеют никакого отношения. К красивостям на пустом месте, к "ух ты, какая фенька" - да.
При наведении на кликабельную картинку меняется курсор, это однозначно и общедоступно говорит о её кликабельности, поэтому к практике все эти приседания не имеют никакого отношения. К красивостям на пустом месте, к "ух ты, какая фенька" - да.
+5
Не скажите... эти "красивости" явно обозначают то, что нажав на картинку вы увидите бОльший ее размер, а не просто перейдете на какую-то страницу...
0
Полностью согласен с практикой. Глядя на интерфейс я должен знать, что я смогу сделать, а что нет. А тут получается, что пока не наведешь на картинку курсор, не поймешь что на нее можно нажать. А если и на жмешь, то не понятно что произойдет. Лупа ассоциируется с увеличением, а не с "оригинальным большим размером картинки". Посмотрите в сторону карт google или photoshop. Курсор "лупа" там означает другое.
0
Если нужно знать без наведения на картинку, то зачем лепить поверх лупу? Мне может достаточно маленькой картинки. Достаточно кнопочки рядом или рамочки особого стиля.
Жаль, что нет стандартного cursor:zoom. А разные типа cursor:nw-resize не особо подходят :/
Жаль, что нет стандартного cursor:zoom. А разные типа cursor:nw-resize не особо подходят :/
0
Не если, а нада знать. В интерфейсе должно быть все понятно...даже модно говорить "интуитивно понятно".
Не надо ударяться в минимализм и скрывать полезные функции. Про кнопочки и рамочки полностью согласен.
Не надо ударяться в минимализм и скрывать полезные функции. Про кнопочки и рамочки полностью согласен.
0
Хорошо. Согласен: интерфейс должен быть удобным. Но интерфейс — это всегда набор правил «игры». Соответственно моя задача сделать так, чтобы эти правила быстро запоминались и принимались, а так же не мешали.
Лупа поверх картинки без наведения мыши — неизящно и вредно. Значит или двигаем её в самый уголок или вообще под картинку. Либо для неувеличивающихся убираем рамку (или делаем её нецветной), для ссылающихся — цвета ссылки, для увеличивающихся — иного цвета. Можно совместно с кнопкой-увеличителем (с кликабельностью картинки и кнопки, потому что в картинку кликнуть легче, а в кнопку больше хочется).
Не стоит забывать так же об alt и title (который выводится вспывающей подсказкой), а так же об адекватных url (типа /img/catalogue/thumbs/ и /img/catalogue/big/)
Лупа поверх картинки без наведения мыши — неизящно и вредно. Значит или двигаем её в самый уголок или вообще под картинку. Либо для неувеличивающихся убираем рамку (или делаем её нецветной), для ссылающихся — цвета ссылки, для увеличивающихся — иного цвета. Можно совместно с кнопкой-увеличителем (с кликабельностью картинки и кнопки, потому что в картинку кликнуть легче, а в кнопку больше хочется).
Не стоит забывать так же об alt и title (который выводится вспывающей подсказкой), а так же об адекватных url (типа /img/catalogue/thumbs/ и /img/catalogue/big/)
0
+1 дело именно в понимании того, что произойдёт при клике.
0
курсор только говорит что это ссылка, а не то что по ссылке будет оригинал большего размера
0
Так можно сделать курсор в виде лупы :)
0
.zoompic:hover{cursor:url("lupa.cur"), nw-resize;}
Локально и с домена сработало в ИЕ7 и Файрфоксе. Опера 9,24 не захотела подгружать. Ждём Оперу :) Или может уже исправили? Ребят, у кого поновее, проверьте!
Локально и с домена сработало в ИЕ7 и Файрфоксе. Опера 9,24 не захотела подгружать. Ждём Оперу :) Или может уже исправили? Ребят, у кого поновее, проверьте!
0
курсор даёт понять, что на картинке есть ссылка. и абсолютно неизвестно, куда эта ссылка ведёт. а лупа, как в первом примере, чётко показывает, что ссылка ведёт на страницу с полноразмерной картинкой.
0
«…Поэтому совершенномудрый стремится к тому, чтобы сделать жизнь сытой, а не к тому, чтобы иметь красивые вещи…»
© Лао Цзы. Дао дэ Цзин
А почему просто не оставить курсор в форме ручки с пальчиком? Ну как а.href=...
© Лао Цзы. Дао дэ Цзин
А почему просто не оставить курсор в форме ручки с пальчиком? Ну как а.href=...
0
Постойте, а разве курсор с пальцем, рамку, альт текст, не изобрели ещё?
0
Искреннее спасибо, отличный скрипт.
0
вот тут вариант с изменением курсора http://vikjavev.no/highslide/#examples
Очень неплохая реализация всплывающих картинок и текстов. (только лицензия не привольная)
Очень неплохая реализация всплывающих картинок и текстов. (только лицензия не привольная)
+2
Вы этот скрипт в IE проверяли? :) Довольно забавный результат показывает.
+1
За идею спасибо. Понравилось. От себя добавлю: можно сделать меню - "несколько пиктограмм". И также не забываем, что можно пользоваться и другими js "штуками". А в текущем примере... мне лично кажется чегото не хватает, как будто чтото не так :(
0
В Опере 9.02 работает абсолютно не корректно...
0
посмотрел JavaScript-код. Как можно так безалаберно писать? Замыкания, отсутствие кеширование, отсутствие намека на совместимость с другими эффектами...
0
Простите, а что такое замыкания?
0
лучше всего это здесь описано
http://webo.in/articles/habrahabr/18-sol…
http://webo.in/articles/habrahabr/18-sol…
+1
Спасибо
0
однако
вы так напали на замыкания, что можно подумать, что это антипаттерн
а это, btw, один из краеугольных камней программирования в целом для многих
Closure (computer science)
то, что в каком-то вшивом IE могут возникнуть баги с утечками памяти из-за неосмотрительного их использования - не делает замыкания антипаттерном
вы так напали на замыкания, что можно подумать, что это антипаттерн
а это, btw, один из краеугольных камней программирования в целом для многих
Closure (computer science)
то, что в каком-то вшивом IE могут возникнуть баги с утечками памяти из-за неосмотрительного их использования - не делает замыкания антипаттерном
+1
Понривилось :)
0
тормозит на медленном интернете.
сделайте прелоад лупы!
сделайте прелоад лупы!
+1
Мне не нравится с лупой, и с рамкой и ваще. Не интуитивно, обманывает ожидания. ИМХО, надо быть проще. Я вот так решил вопрос на своем сайте.
А в общем случае - все эти решения НИКАК НЕ ВЛИЯЮТ НА КЛИКАБЕЛЬНОСТЬ КАРТИНКИ - так как эффект появляется при наведении. На большинстве же сайтов практикуются лупы и надписи ьипа "увеличить", которые видно ДО НАВЕДЕНИЯ. Вот такие методы повышают кликабельность.
Понравился мне пример bettrrr - забобрить!
И последнее. Не люблю java. Люблю css.
А в общем случае - все эти решения НИКАК НЕ ВЛИЯЮТ НА КЛИКАБЕЛЬНОСТЬ КАРТИНКИ - так как эффект появляется при наведении. На большинстве же сайтов практикуются лупы и надписи ьипа "увеличить", которые видно ДО НАВЕДЕНИЯ. Вот такие методы повышают кликабельность.
Понравился мне пример bettrrr - забобрить!
И последнее. Не люблю java. Люблю css.
0
Копирайты то где?
http://cssglobe.com/post/1238/style-your…
http://cssglobe.com/post/1238/style-your…
+1
Идея хорошая.
Не сколько для кликабельности, сколько для оживления интерфейса.
Я бы убрал фильтр alpha и использовал png.
А еще появилась идейка скрывать таким образом watermark.
Т.е. на watermark накладывается кусок оригинальной картинки. конечно это слегка упростит тыбренье картинки, но все-же пользователям будет приятно смотреть на нее без доп.помех.
Не сколько для кликабельности, сколько для оживления интерфейса.
Я бы убрал фильтр alpha и использовал png.
А еще появилась идейка скрывать таким образом watermark.
Т.е. на watermark накладывается кусок оригинальной картинки. конечно это слегка упростит тыбренье картинки, но все-же пользователям будет приятно смотреть на нее без доп.помех.
0
Я тоже о нестандартном использовании задумывался. Про «водяной знак» отличная идея!
Можно еще таким образом графически отображать категорию картинки, например к фотографии с праздника можно будет наложить в угол воздушный шарик и т.п.
Можно еще таким образом графически отображать категорию картинки, например к фотографии с праздника можно будет наложить в угол воздушный шарик и т.п.
0
Согласен. На маленькой картинке делать водяной знак «съёмным» при наведении, а на увеличенной уже вживлять. Действитель было бы приятнее.
0
Посетитель должен видеть, что картинка кликабельна до наведения курсора на картинку.
На кликабельных картинках я ставлю в углу полупрозрачную лупу.
На кликабельных картинках я ставлю в углу полупрозрачную лупу.
+1
идея неплоха, но реализация явно хромает
+1
НЛО прилетело и опубликовало эту надпись здесь
>Скрипт, кстати, прост как «дважды два», и занимает всего 2 килобайта.
К тому же он просто ужасен. Можно сказать, что каждая вторая строка скрипта демонстрирует полное непонимание того, что происходит.
К тому же он просто ужасен. Можно сказать, что каждая вторая строка скрипта демонстрирует полное непонимание того, что происходит.
0
О-о-х, http://kplahotya.narod.ru/other/notes/styleyourimagelinks.html
как вам мой перевод?
как вам мой перевод?
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Оформление кликабельных картинок