<area>

Описание

Каждый элемент <area> определяет активные области изображения, которые являются ссылками. Изображение, с привязанными к нему активными областями, называется в совокупности картой-изображения. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом она может быть разбита на невидимые зоны разной формы, где каждая из областей будет служить ссылкой.

Тег<area> задает следующие параметры области:

  • форму области
  • размеры
  • устанавливает адрес документа, на который следует сделать ссылку
  • имя окна или фрейма, в который браузер будет загружать документ.

Элемент <area> используется совместно только с элементом <map>, в качестве его дочернего элемента. 

Синтаксис

<map>
 <area href="URL">
<map>

Атрибуты

Для HTML4

  • alt        альтернативный текст для области изображения
  • coords координаты активной области
  • href      задает URL на который следует перейти
  • nohref  указывает, что регион не имеет связанной ссылки
  • shape  задает форму области 
  • target   определяет имя фрейма, в который необходимо загрузить документ 

Для HTML5 дополнительно введены

  • hreflang    указывает на язык документа, на который ведет ссылка
  • download  указывает на то, что по ссылке находится документ, который нужно загрузить и определяет его имя файла
  • rel             устанавливает связь этого документа (или подраздела) с целевым ресурсом
  • type          устанавливает тип ресурса, на который ведет ссылка

Примечание. 

Для этого тега доступны глобальные атрибуты и события.

Спецификация

версия HTML 3.2 HTML 4.01 HTML 5.0 XHTML 1.0 XHTML 1.1
поддержка да да да да да

Поддержка браузерами

браузер IE Chrome Opera Firefox Safari
версия 6.0+ 2.0+ 9.2+ 2.0+ 3.0+
поддержка да да да да да

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример элемента area</title>
 </head>
 <body>
   <P><img src="area1.jpg" type="image/jpeg" usemap="#demomap"></p>
  <MAP name="demomap">
   <AREA href="http://develweb.ru" 
          alt="Ссылка на главную страницу" 
          shape="rect" 
          coords="22,27,149,127">
   <AREA href="http://develweb.ru/html/area" 
          alt="Ссылка на страницу с описанием тега area" 
          shape="rect" 
          coords="158,27,282,127">
  </MAP>
 </body>
</html>
Шаблон для элемента area
Рис.1 Шаблон для элемента area​​
Результат примера элемента <area>
Рис.2 Результат примера тега <area>