Блог Vaden Pro

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

Тег 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 тега: 
Изображения