HTML тег <map>

Элемент <map> (от англ. "map" ‒ «карта») создаёт карту-изображение.

Карта изображений — это зоны обычного изображения, при нажатии на которые происходит активация ссылок связанных с конкретной зоной. Эти зоны называются областями карты изображений. Сами ссылки, а также координаты каждой области задаются при помощи тегов <area>, которые находятся внутри элемента <map>.

Цель использования <map> — в связывании элемента <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в <img>, задаваемого атрибутом usemap, так и в <map>, устанавливаемого атрибутом name.

Синтаксис

<img src="..." alt="..." usemap="#Name">
...
<map name="#Name">
  ...
  <area shape="..." coords="..." href="...">  
  ...
</map>

Закрывающий тег

Обязателен.

Атрибуты

name

Определяет имя карты-изображения.

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <map> со следующими значениями CSS по умолчанию:

map {
    display: inline;
}

Различия между HTML 4.01 и HTML5

В HTML5, если у элемента указан глобальный атрибут <id>, то он должен иметь то же значение, что и атрибут name.

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

<img src="images/foto_elem.jpg" alt="Карта изображений" style="width:450px;height:292px;" usemap="#mykarta">
<map name="mykarta"> 
  <area shape="rect" coords="133,163,414,252" 
  title="Зажигалка" href="javascript:alert('Это прямоугольная ссылка');"> 
  <area shape="circle"" coords="58,158,40" 
  title="Монета" href="javascript:alert('Вы выбрали круг');"> 
  <area shape="poly" coords="133,62,278,59,284,24,407,22,410,130,285,134,278,96,133,95" 
  title="Ключ от авто" href="images/auto500.jpg" target=_blank> 
</map>

Спецификации

Учебник HTML

HTML уроки: HTML Элементы

HTML Изображения