Создание карты изображений в HTML

Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.

Карта изображения определяется парным тегом <map>…</map>. HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name.

Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег <area>.

Атрибуты тега <area>

Координаты по умолчанию измеряются в пикселях.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Примеры различных форм областей карты изображений

<!-- прямоугольник 10 на 10 пикселей в верхнем левом углу изображения -->
<area shape="rect" coords="0, 0, 9, 9">

<!-- круг с радиусом в 5 пикселей и центром, расположенном в точке (10, 10) -->
<area shape="circle" coords="10, 10, 5">

<!-- треугольник с координатами вершин (10, 50), (15, 20) и (20, 50) -->
<area shape="poly" coords="10, 50, 15, 20, 20, 50">

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

Чтобы использовать изображение, как карту, в тег <img> необходимо ввести дополнительный атрибут usemap, определяющий имя карты изображения. Перед этим именем ставится знак "#".

Пример использования Image Map

<map name="map0">
    <area shape="rect" coords="0, 0, 402, 42" href="#area1">
    <area shape="rect" coords="0, 42, 132, 204" href="#area2">
    <area shape="poly" coords="260, 96, 331, 42, 403, 96, 377, 180, 286, 180" href="#area4">
    <area shape="circle" coords="180, 100, 90" href="#area3">
    <area shape="rect" coords="0, 0, 402, 204" href="#area5">
</map>
<img src="imagemap.gif" border="0" width="402" height="204" usemap="#map0">

При кликах на различные области данного изображения меняется цвет соответствующего текста:

Область 1

Область 2

Область 3

Область 4

Применение технологии Image Map

Технология Image Map применяется в самых различных областях. Однако наиболее часто ее применение можно увидеть при создании графических меню, когда создается одно большое изображение с элементами меню, и каждому участку изображения предписывается определенное действие.