Тег area

Справочник:

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

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


4.0+	1.0+	2.0+	1.0+	1.0+	1.0+	1.0+

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

HTML

3.2

4.01

5.0

XHTML

1.0

1.1

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

Тег <area> отвечает за выделение на картинке активных зон, которые выступают ссылками. Такая картинка с зонами ссылок носит название карта-изображение.

Внешне такой комплекс ссылок практически не имеет отличий в сравнении с обычной картинкой, в зависимости от того, куда кликнет пользователь - может отправить на разные страницы.

Зона ссылки не ограничивается какой-то определенной формой. С помощью атрибута shape можно задать любую геометрическую форму для активной зоны. Также в <area> устанавливается адрес перехода по ссылке. В тоже время можно задать и окно или фрейм, в котором будет открываться документ, на который ссылается область карты-изображения.

Существует две разновидности принципа работы карты: клиентский и серверный. Отличие их заключается в расположении этой самой карты. Клиентский - более быстрый, в этом случае ссылка и картинка находится в одной и той же директиве, а серверная - в разных. Поэтому браузеру нужно сначала добраться до карты, а потом уже по ссылке переходить на заданную страничку.

Тег <area> работает в комплексе с map, который играет роль связующего звена между изображением и координатами активных зон. Если зоны ссылок наплывают друг на друга, то сверху окажется та, которая находится выше в дереве HTML-документа.

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

HTML

<map>
  <area href="путь к веб-странице">
</map>

XHTML

<map>
  <area href="путь к веб-странице" />
</map>

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

accesskey - переключание фокуса с областей с помощью определенной комбинации клавиш.
alt - текст, который будет выводится для определенных активных зон, если картинка не прогрузится.
coords - определение координат активной зоны ссылки.
href - атрибут для записи URL-адреса ссылки.
hreflang - опредеяет язык для документа, на который ссылается область.
nohref - участок изображения, где отсутствует ссылка.
shape - геометрическая форма активной зоны.
tabindex - определяет очередность передачи фокуса после нажатия Tab.
target - указывает на окно или фрейм, куда будет загружаться страница после перехода по ссылке.
type - MIME-тип документа.

В дополнение этого, тег поддерживает универсальные атрибуты и события.

Закрытый тег

Нет.

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

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег area</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 тега:

Изображения