Блог старого компьютера

Блог старого компьютера


Главная html & css Лупа при наведении на изображение

Лупа при наведении на изображение

09.06.2012 04:33 Администратор html & css
Печать PDF
Иногда нужно как то показать что изображение является кликабельным. Для этого сейчас существует как куча готовых примером так и множество оригинальных решений. Я же опишу самый простой способ как при наведении на изображение отобразить на нем лупу. Вы же можете поменять лупу на любой другой значек который вам больше подходит.

И так начну с того что сразу скажу что метод не является кросбраузерным и динозавры вроде ie 6 его просто не поймут (для них можно использовать различные фиксы). Данная реализация очень проста и не требует использования JS, или написание большого объема кода. Вся основа у нас будет реализована на css:

И так пример:

<html>
<head>
</head>
<body>
<style>
a.ilink{
position:relative;
display:block;
}

a.ilink:hover span{
background: url("zoom.gif") no-repeat;
width:32px;
height:32px;
position:absolute;
top:0;
left:118px;
display:block;
opacity:0.7;
}
</style>
<a href="#" class="ilink"><img src="/lavita_g_vs.jpg"><span></span></a>
</body>
</html>

 Вот и весь код. Тут все просто, при наведении курсора мыши на изображение назначаем тегу span нужные нам стили. Данный эффект можно добавить к любому кликабельному изображению, для этого просто необходимо заключить его в ссылку и дать назначить ссылке класс ilink и в завиимости от размера изображения нужно будет откалибровать положение лупы, либо сделать его по левому краю. Так же можно прикрепить к этому коду какой либо интересный лайтбокс чтоб при клике на изображение оно разворачивалось в красивом окне.

Вот такая небольшая заготовочка для ваших сайтов, дорабатываем под свои нужды и используем.

Скачать пример

Комментарии  

 
0 #3 Administrator 25.05.2015 17:12
Цитирую lipsait:
как бы это применить к Joomla, к встроенному в неё классу - modal.

Применить можно хоть к чему, чтоб не редактировать вывод можно воспользоваться псевдоэлементам и after или before
Цитировать
 
 
0 #2 lipsait 21.03.2015 14:32
как бы это применить к Joomla, к встроенному в неё классу - modal.
Цитировать
 
 
0 #1 lipsait 21.03.2015 14:29
легко сказать " прикрепить к этому коду какой либо интересный лайтбокс чтоб при клике на изображение оно разворачивалось ". Как это сделать?
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?