Тег map
Тег <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 | определяет направление символов:
|
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> — элемент уровня блока, т.е. содержимое тега всегда начинается с новой строки. После тега также добавляется перенос строки.
Твой код:
Результат:
большой полигон