Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег map | назначение, синтаксис, атрибуты, примеры

Тег map

Последнее обновление: 23.01.2011

Тег <map> (с англ. карта) — тег-контейнер для создания карты-изображений.
Блочный элемент.

Тег <map> определяет клиентскую карту (или другой механизм навигации), который может быть ассоциирован с другими элементами (<img>, <object>, <input>). Карта ассоциируется с элементом с помощью атрибута usemap. Тег <map> может использоваться без ассоциированного изображения для механизмов общей навигации.

Внутри контейнера <map> можно комбинировать:

  • один или более элементов <area>. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом
  • содержимое уровня блока. Это содержимое должно включать <теги a>, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом

Если тег <map> имеет смешанное содержимое (и теги <area>, и блочные элементы), браузеры, согласно спецификации HTML 4.01, должны игнорировать элементы <area>.

Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<map id="..."></map>

Атрибуты



class определяет имя используемого класса
dir определяет направление символов:

  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет язык отображаемого документа
name имя карты изображения. Используется, как значение параметра usemap тега <img>
onblur потеря фокуса элементом
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка

Пример

код:


<map name="myMap" id="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href="#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href="#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src="map.png" width="300" height="200" alt="карта" usemap="#myMap"/>

Рекомендации по использованию

  • закрывающий тег обязателен (</map>)
  • атрибут id является обязательным
  • рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить
  • не рекомендуется использовать карту-изображений в качестве основной навигации, из-за слабой поддержки старыми и голосовыми браузерами

Тег <area> — элемент уровня блока, т.е. содержимое тега всегда начинается с новой строки. После тега также добавляется перенос строки.

Твой код:

Результат: