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

Тег/Атрибут Значение
<img> Ниже приведены атрибуты изображения, созданного с помощью <img>. Применяются обычные атрибуты <img>.
usemap Имя карты с предшествующим символом решетки. Например, для карты с name = "mymap" изображение должно иметь usemap = "#mymap".
<map> служит контейнером для элементов <area>
name Имя карты для ее идентификации. Используется с атрибутом usemap изображения.
<area> Ниже указаны атрибуты . Тег <area> поддерживает также все атрибуты тега гиперссылки (<a>), за исключением ping.
alt Альтернативный текст, если не поддерживаются изображения. Он необходим только если установлен атрибут href.
coords Координаты, определяющие выбранную область. Например, если shape = "polygon", этот атрибут должен содержать ряд пар «x, y», разделенных запятыми (т. е. coords = "x1, y1, x2, y2, x3, y3, ..."). Если shape = "rectangle", этот атрибут должен содержать координаты верхнего левого угла и нижнего правого. Если shape = "circle", этот атрибут должен содержать centerX, centerY, radius.
href URL-адрес гиперссылки. Если он опущен, то <area> не будет представлять собой гиперссылку
shape Форма области. Можно установить по умолчанию для выбора всего изображения (атрибут coords не требуется), circle или circ для круга, rectangle или rect для прямоугольника и polygon или poly для многоугольной области, заданной вершинами.

Карты изображений - это изображение с интерактивными областями, которые обычно действуют как гиперссылки.
Изображение определяется тегом <img>, а карта определяется тегом <map> с тегами <area>, чтобы обозначать каждую зону, на которую можно щелкнуть. Используйте атрибуты usemap и name для привязки изображения и карты.

Для создания карты изображения, должна быть задана область для кажой фигуры: Код будет выглядеть следующим образом:

<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
    <area shape="polygon" coords="79,6,5,134,153,134">
    <area shape="rectangle" coords="177,6,306,134">
    <area shape="circle" coords="397,71,65">
</map>

Вы должны увидеть, что браузер распознает области, при наведении указателя на фигуру. Посмотреть демо-версию на JSFiddle.