<map>
Элемент <map>
служит контейнером для элементов <area>
, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования <map>
— в связывании элемента <img>
с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в <img>
, задаваемого атрибутом usemap, так и в <map>
, устанавливаемого атрибутом name
.
Закрывающийся тег:
Обязателен
Поддержка:
HTML4 и выше
Атрибуты:
Пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MAP</title> <style> #title { line-height: 0; /* Изменяем межстрочное расстояние */ } #title img { border: none; /* Убираем рамку вокруг изображения */ } </style> </head> <body> <div id="title"><img src="weblector.png" width="640" height="158" alt="Детский образовательный центр"><br> <img src="weblect.png" width="640" height="30" alt="Навигация по сайту" usemap="#Navigation"></div> <p><map name="Navigation"> <area shape="poly" coords="113,24,211,24,233,0,137,0" href="Лекции по веб-программированию _ Лекции по веб-программированию.html" alt="Информация"> <area shape="poly" coords="210,24,233,0,329,0,307,24" href="Воложанина Алина _ Лекции по веб-программированию" alt="Профиль"> <area shape="poly" coords="304,24,385,24,407,0,329,0" href="Справочник HTML _ Лекции по веб-программированию.html" alt="Справочник HTML"> <area shape="poly" coords="384,24,449,24,473,0,406,0" href="Задания для самостоятельной работы _ Лекции по веб-программированию.html" alt="Задания для самостоятельной работы"> <area shape="poly" coords="449,24,501,24,525,0,473,0" href="Список студентов _ Лекции по веб-программированию.html" alt="Список студентов"> </map></p> </body> </html>