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

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

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

Заходим на сайт Highslide. В первую очередь можем ознакомиться с возможностями скрипта (примерами) на главной странице, но я расскажу именно о первом способе увеличения картинок.

После чего переходим в раздел "Download" и скачиваем последнюю версию скрипта (на данный момент 4.1.8). Видим там много файлов, которые служат для разных возможностей скрипта. Еще есть папка examples с готовыми примерами для ознакомления и вставки у себя на странице. В нашем случае нам понадобятся только такие файлы и папка: graphics, highslide.js, highslide.css, highslide-ie6.css.

Суем эти файлы в папку js относительно страницы сайта. Открываем в редакторе файл вашей страницы, например, index.html и между <head></head> пишем:
<script type="text/javascript" src="js/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="js/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'js/graphics/';
hs.wrapperClassName = 'wide-border';
</script>

Дальше, предположим, в теле документа у нас есть картинка slide.jpg, написанная в виде <img src="img/slide.jpg">. И тут есть 2 варианта, как можно сделать увеличение изображения при нажатии:

1. Увеличение этой самой картинки с уменьшенного вида. То есть уменьшаем картинку средствами html или css и при нажатии загружаем ее же в оригинальном виде. Выглядит это так:
<a href="img/slide.jpg" onclick="return hs.expand(this)"><img src="img/slide.jpg" width="40" height="80"></a>

2. Увеличение уменьшенного изображения с другим файлом. То есть уже имеется уменьшенная картинка slide.jpg, при нажатии загружаем другую slide2.jpg. Выглядит это так:
<a href="img/slide2.jpg" onclick="return hs.expand(this)"><img src="img/slide.jpg"></a>

Можно посмотреть примеры тут и тут.

Если нужно убрать рамку, то надо редактировать class в файле highslide.css. Если нужно убрать ссылку на сайт производителя и ненужные надписи, то надо исправить и удалить несколько в файле highslide.js.

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


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

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