Карта-изображение
Порой возникает необходимость связать гиперссылку с некоторой областью изображения. Чаще всего это нужно для представления пространственной связи. Например на сайте госструктур каждая область на карте страны будет вести на сайт местной администрации. Или сайт крупной компании, ссылающийся на свои региональные представительства, также может применять этот прием.
Не вдаваясь в излишнее текстовое описание, покажем что имеется ввиду. На представленной ниже вымышленной карте каждая из областей является ссылкой, в чем можно убедиться наведя на них мышкой и обратив внимание на сроку состояния браузера.
Как видите, каждой области соответствует своя гиперссылка. Это достигается использованием тегов <map> и <area>. Подробнее о работе этих тегов вы узнаете в любом html-справочнике. Нас же интересует несколько другой вопрос.
Когда о наличии ссылки пользователь судит лишь по изменению внешнего вида курсора (а на строку состояния вообще вряд ли кто то смотрит) это не очень хорошо. Нужно несколько оживить картинку.
Сделаем так чтоб при наведении на конкретную область эта область подсвечивалась другим цветом. Для этого заранее приготовим картинки, аналогичные исходной во всем, но с выделенной нужной областью. Такое обновленное изображение будет подгружаться вместо исходной картинки при наведении мышки. Выглядеть это будет так:
Согласитесь, такая интерактивная карта выглядит намного интереснее.
Делается это очень просто. В исходный тег <img> необходимо добавить дополнительный параметр id="mapid", а в каждый тег <area> добавить обработчки событий onmouseover и onmouseout со следующими значениями: onmouseover="mapid.src='адрес новой картинки';" onmouseout="mapid.src='адрес исходной картинки';". Теперь при наведении курсора мыши на какую либо область будет подгружаться соответствующее новое изображение с выделенной областью, а при отведении будет возвращаться первоначальное изображение.
Чтобы картинки менялись сразу при наведении курсора, сделайте предварительную загрузку изображений.
Партнерская программа Nekki - браузерные онлайн игры
доля партнера до 50%
|
