Оформление кликабельных картинок
Очень практично оформлять кликабельные картинки, к примеру при наведении на картинку появится изображения говорящее о том что эта картинка кликабельна — как на картинке выше.
Как это работает?
Java script сценарий будет находить кликабельные картинки и накладывать на них еще один слой(<span>), который мы будем видеть при наведении курсора на картинку.
Если говорить проще, скрипт будет заменять
<a href="/somelink"><img src="image.jpg" alt="My Image" /></a>на
<a href="/somelink"><img alt="My Image" src="image.jpg" /><span></span></a>Как установить?
Пример установки я не буду описывать, лучше дам готовый пример!
Скачиваем/Смотрим
Скрипт, кстати, прост как «дважды два», и занимает всего 2 килобайта.
По мотивам: http://cssglobe.com/post/1238/style-your-image-links
У вас отличный блог, читаю с большим удовольствием
Большое спасибо, очень приятно подобное слышать ;)
Отличный блог, интересные примеры :) А контакты есть?
Подскажите, а как лучше в правый нижний уголок кликабельных изображений добавлять лупу?
Спасибо большое, нужный скрипт.
PS
блог у вас очень интересный :)
allmoney.ws, в этой строчке изменяйте процентное соотношение:
background:url(zoom.gif) no-repeat 50% 50%;
Mak и Dan Sosedov очень приятно подобное слышать. Да пожалуй надо сделать страничку с контактами, завтра утром возьмусь.
Последнее время все хорошие статьи на хабре это Ваших рук дело. Подпишусь-ка я на этот блог. Спасибо, отличные материалы!
Спасибо! Обязательно гденибудь пригодится
nice )
круто конечно, но
это зачем??
думаю пользователь поймет, что картинку можно посмотреть в большем размере, просто если курсор изменится на руку
..как это есть сейчас.
Очень полезный блог. Спасибо.
Но по поводу скрипта обнаружил: если фото выровнены табличным способом (стоят внутри ячеек) скрипт не работает совершенно…
А жаль.
угу, тоже что-то с позицией span-ов – отдельно от картинки рисуются :)
А у меня вообще — мистика — что с , что без … работает…
Интересный прием!
Блин) у меня наложенная картинка всплывает стабильно выше той на которую накладываю…
Хм, странно, попробуйте поиграться с z-index ;-)
найти бы его еще =)
кстати если поставить position: realtive; как советуют на офсайте, то картинка появляется вааще в самом верху сайта))
Спасибочки! Очень достойное описание!
Ооо да как раз то что нужно.
У меня что-то тоже внутри таблицы не работает. Как это можно решить?
Дельная статья, А на какой проге рилосовалось илюстрация?
спасибо большое за статью. как раз пыталась найти информацию по поводу изготовления подобных картинок. очень помогли
C таблицами скрипт косяченно работает
в таблице не работет пока не исправить в скрипте
строку
a[i].style.position = «static»;
на
a[i].style.position = «relative»;
[url=http://good-catalogue.in-global.net/]Konstantin[/url]
М-да…
Following my own analysis, billions of persons in the world receive the at different creditors. Thence, there is great possibilities to find a small business loan in all countries.