Тег <map>

IE
3.0+
Chrome
1.0+
Opera
4.0+
Safari
1.0+
Firefox
1.0+
Android
1.0+
iOS
1.0+

Тег <map> служит контейнером для элементов <area>, которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега <map> - в связывании тега <img> с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге <img>, задаваемого атрибутом usemap, так и в теге <map>, устанавливаемого атрибутом name.

Закрывающий тег обязателен.

<!-- HTML -->
<map>
	<area href="URL">
</map>

<!-- XHTML -->
<map>
	<area href="URL"/>
</map>

Атрибуты

name: Имя карты-изображения.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег map</title>
  <style type="text/css">
   #diagr img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
 <div id="diagr"><img src="/assets/images/diagram.png" width="177" height="168" alt="" usemap="#diagr_map"></div>
  <p><map name="diagr_map">
  <area shape="poly" coords="95,13,86,83,2,103,0,81,30,35" href="orange.htm" alt="Оранжевый">
  <area shape="poly" coords="162,47,175,97,135,153,78,167,23,147,4,108,88,86" href="yellow.htm" alt="Желтый">
  <area shape="poly" coords="100,0,140,9,166,28,168,40,94,80,91,68" href="green.htm" alt="Зеленый">
  </map></p>
 </body>
</html>

Результат данного примера показан ниже:

Карты-изображения

Категория: Изображения

Статьи по теме

Карты-изображения