Name: Увеличение изображения при нажатии
Item: Увеличение изображения при нажатии
Author: Karin

Меню

Работа в сети Информация о сайте Новости в электроной комерции Все для сайта Бесплатные программы Доска объявлений и статей Блог Форум Каталоги

Как создать сайт с нуля, уроки

Уроки HTML
Уроки CSS
Уроки Фотошоп

Как создать сайт на 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)

Просмотров: 2521 | Комментарии: 1 | Теги: Увеличение изображения при нажатии | Рейтинг: 0.0/0

Всего комментариев: 1

Порядок вывода комментариев:

1 Karin (16.09.2013 11:53)

That saves me. Thanks for being so sesinble!

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