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