Меню
Как создать сайт с нуля, уроки
Как создать сайт на ucoz, уроки
Заработок на кликах
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Каталог



Главная » Статьи » Создание веб сайтов » Как cделать сайт
Увеличение изображения при нажатии

В этой статье будет рассмотрено, как при нажатии мышкой по картинке сделать ее увеличение, причем не по центру экрана, а в месте расположения самого изображения. Этот урок будет посвящен исключительно скрипту 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.



Источник: http://lospirata.ru
Категория: Как cделать сайт | Добавил: Ford20 (01.12.2011)
Просмотров: 2415 | Комментарии: 1 | Теги: Увеличение изображения при нажатии | Рейтинг: 0.0/0
Всего комментариев: 1
0
1 Karin   [Материал]
That saves me. Thanks for being so sesinble!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]