Тег <map> используется для создания карт-изображений. Для определения активных областей (координаты, форма, размеры и т.д) карты-изображения, используется тег <area>. При нажатии на активную область изображения происходит определенное действие, например, переход на страницу с подробной информацией.
Тег <area> всегда располагается в теге <map>. Активные области могут наслаиваться друг на друга, в этом случае при нажатии будет активирована та область, которая в коде HTML находится выше.
Тег <map> используется также с элементом <img>, чтобы связать его с клиентской картой-изображением. Для этого применяется единый идентификатор, который в теге <img> задается атрибутом usemap, а в теге <map> - атрибутом name.
В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.
Синтаксис
HTML тег <map> парный, содержимое записывается между открывающим (<map>) и закрывающим (</map>) тегами.Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<p>Нажмите на логотип или на один из элементов логотипа, чтобы посмотреть его ближе:</p>
<img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png" width="145" height="126" alt="block" usemap="#blockmap">
<map name="blockmap">
<area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html">
<area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic">
<area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html">
</map>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| name | mapname | Обязательный атрибут. Задает имя карте-изображению. Тег связан с атрибутом usemap элемента <img>, который создает связь между изображением и картой. |
Тег <map> поддерживает также глобальные атрибуты.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
