Тег <area>

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

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

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше. Закрывающий тег не требуется.

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

Атрибуты

accesskey: Переход к области с помощью комбинации клавиш.
alt: Альтернативный текст для области изображения.
coords: Координаты активной области.
href: Задает адрес документа, на который следует перейти.
hreflang: Указывает язык документа, на который ведет ссылка.
nohref: Область без ссылки на другой документ.
shape: Форма области.
tabindex: Задает последовательность перехода между элементами с помощью клавиши Tab.
target: Имя окна или фрейма, куда браузер будет загружать документ.
type: Устанавливает MIME-тип документа, на который ведет ссылка.

Пример

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

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

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

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