Разработка сайтов, создание сайтов
главная / Web-дизайн / Увеличение изображения при наведении

Увеличение изображения при наведении

Чаще всего интернет-магазины прибегают к такому рода решению - увеличению картинки товара при наведении курсора. Это очень удобно - товар не занимает много места на странице, больше моделей попадают в окно браузера, при наведении клиент сможет рассмотреть товар в полном объеме.

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

Заходим на оф. сайт Zoomi, скачиваем скрипт zoomi.js, после чего скачиваем библиотеку JavaScript Jquery.

На странице между <head> и </head>:
<script type="text/javascript" src="js/jquery-1.4.min.js"></script> # либо другая версия jquery
<script type="text/javascript" src="js/zoomi.js"></script>

Есть 2 варианта представления увеличенных картинок.

1. После <body> в теле документа пишем:
<img class="zoomi" src="путь к изображению" width="длинна" height="высота">
# в этом случае будет увеличиваться уменьшенное при помощи стандартных атрибутов HTML изображение до тех размеров, какое оно есть.

2. После <body> пишем:
<img class="zoomi" src="путь к изображению" alt="путь к увеличенному изображению">
# в таком случае при наведении на исходное изображение будет показываться картинка из alt.

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

Источник: lospirata.ru
КОНТАКТЫ
г. Екатеринбург
info@vismech.ru


текущее:
Увеличение изображения при нажатии
Фирменный стиль
Google Dance

НОВОСТИ
2011 г., «VisMech.ru»