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