» » >
Всплывающая иконка лупы
18.09.2013, 15:21

Шаг 1 - Установим HTML:

Для реализации данной идеи нам потребуется, создать ячейку div, с классом image_zoom, в которую мы помещаем ссылку на оригинал изображение и адрес изображение поменьше. А между ними пропишем тег span, который и будет отвечать за появление иконки лупы.

HTML-Code

<div id="image_zoom">
  <a href="оригинальный размер" alt="">
  <span></span>
  <img src="маленький размер" alt="" /></a>
</div>
Шаг 2 - Установим CSS:

А в файл стиля css прописываем нужные нам атрибуты, рамка, отступы, адрес самой иконки лупы.

CSS-Code

#image_zoom {
  width:100%;
  overflow:hidden;
}

#image_zoom a {
  float:left;
  position:relative;
  margin:5px;
}

#image_zoom a span {
  display:none;
  width:48px;
  height:48px;
  background-image:url(http://ucoz-helper.ucoz.com/HTML-CSS/zoom-original.png);
  background-repeat:no-repeat;
  position:absolute;
  left:15px;
  top:15px;
}

#image_zoom img {
  border: solid 1px #888888;  
  padding:5px;
}  

#image_zoom a:hover span {
  display:block;
}

Уделив пару минут, теперь мы с лёгкостью знаем как установить иконку лупы на изображение


Категория: HTML-CSS | Добавил: tashkent97
Просмотров: 1247 | Загрузок: 84 | Источник: http://www.center-dm.ru/ | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<