Карта изображения

Карта изображения создаёт на изображении одну или несколько областей, которые являются ссылками. Вот пример такого изображения:

Нажмите на определённую часть картинки и Вы перейдёте на соответствующий сайт.

Карта изображения создаётся при помощи тега <map>. У него должен быть атрибут name, который задаёт имя карты. А у тега <img> должен быть атрибут usemap. Его значение совпадает с именем карты, только в начале идёт знак #. Таким образом изображение связывается с определённой картой. Для примера сделаем такое изображение, как на этой странице. Добавим на страницу картинку и создадим для неё карту.

<img src="imagemap.jpg" alt="Карта картинки" usemap="#newmap">
<map name="newmap">
</map>

Внутри тега <map> должны находиться теги <area>. Они определяют области, которые становятся ссылками. Для указания области у этих тегов есть атрибут shape. Он устанавливает форму области.

shape="rect" - прямоугольник

shape="circle" - круг

shape="poly" - многоугольник

shape="default" - всё изображение

Кроме формы области указываются её координаты при помощи атрибута coord. Координаты указываются в пикселях и отсчитываются от левого верхнего угла изображения. Они перечисляются через запятую. Для каждой формы области координаты определяются по-разному. Для прямоугольника нужно указать два угла:

X первого угла, Y первого угла, X второго, Y второго

Для круга указываются координаты центра и радиус:

X центра, Y центра, радиус

Для многоугольника нужно перечислить координаты всех углов:

Кроме рассмотренных атрибутов, тег <area> имеет те же атрибуты, что и тег <a>. Прежде всего, атрибут href, указывающий URL, на который нужно перейти.

В примере сделаем одну круглую область и одну прямоугольную. Для этого добавим в тег <map> такой код:

<area href="http://yandex.ru" shape="circle" coords="100,70,50">
<area href="http://mail.ru" shape="rect" coords="22,143,210,185">

Области на карте изображения могут пересекаться. Выше будет та область, которая идёт раньше в коде страницы.