Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Тег map

Справочник: 
Тег

Характеристики тега

В каких браузерах работает?

3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

В каких спецификациях используется?

HTML 3.2 4.01 5.0
XHTML 1.0 1.1

Для чего используется?

Используется для формирования карты-изображения. Является связующим звеном между картинкой и координатами активных областей на ней. Используется всегда в паре с area, а точнее приходится родительским тегом для него. Синхронизируется с img благодaря идентичности значений атрибута usemap в картинке и name в теге <map>. Это является обязательным условием работы конструкции карты-изображения.

Как правильно задавать?

<map name="имя">
  <area атрибуты>
</map>

Какие атрибуты поддерживаются?

  • name - определяет идентификатор тега.

Закрытый тег

Да.

Пример использования

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег map</title>
  <style type="text/css">
   #img {
    line-height: 0; /* убираем высоту строк */
   }
  </style>
 </head>
 <body>
 <div id="img"><img src="images/map.jpg" width="850" height="430"
                alt="Районы Донецка" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="145,27,233,21,203,0,122,0" href="petrovskiy.html"
   alt="Петровский">
  <area shape="poly" coords="200,18,243,0,319,0,297,27" href="kirovskiy.html"
   alt="Кировский">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="leninskiy.html"
   alt="Ленинский">
  <area shape="poly" coords="384,24,439,24,473,0,406,0" href="kuybish.html"
   alt="Куйбышевский">
  <area shape="poly" coords="449,24,501,20,585,0,473,0" href="vorosh.html"
   alt="Ворошиловский">
  <area shape="poly" coords="501,24,530,24,553,0,525,0" href="proletar.html"
   alt="Пролетарский">
  <area shape="poly" coords="560,24,515,24,639,0,585,0" href="budenov.html"
   alt="Буденовский">
   <area shape="poly" coords="560,24,605,24,619,0,585,0" href="kievskiy.html"
   alt="Киевский">
   <area shape="poly" coords="560,24,625,24,649,0,585,0" href="kalinenskiy.html"
   alt="Калининский">
  </map></p>
 </body>
</html>

Тип html тега: 
Изображения