<area>

Комментарии

Содержание

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

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

Синтаксис

<map>
  <area href="<адрес>">
</map>

Закрывающий тег

Не требуется.

Атрибуты

alt
Альтернативный текст для области изображения.
coords
Координаты активной области.
href
Задаёт адрес документа, на который следует перейти.
hreflang
Указывает язык документа, на который ведёт ссылка.
nohref
Область без ссылки на другой документ.
shape
Форма области.
target
Имя фрейма, куда браузер будет загружать документ.
type
Устанавливает MIME-тип документа, на который ведёт ссылка.

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>AREA</title>
  <style>
   #title {
    line-height: 0; /* Изменяем межстрочное расстояние */
   }
   #title img {
    border: none; /* Убираем рамку вокруг изображения */
   }
  </style>
 </head>
 <body> 
 <div id="title"><img src="image/ecctitle.png" width="640" height="158" 
                alt="Детский образовательный центр"><br>
  <img src="image/navigate.png" width="640" height="30" 
                alt="Навигация по сайту" usemap="#Navigation"></div>
  <p><map name="Navigation">
  <area shape="poly" coords="113,24,211,24,233,0,137,0" href="page/inform.html" alt="Информация">
  <area shape="poly" coords="210,24,233,0,329,0,307,24" href="page/activity.html" alt="Мероприятия">
  <area shape="poly" coords="304,24,385,24,407,0,329,0" href="page/depart.html" alt="Отделения">
  <area shape="poly" coords="384,24,449,24,473,0,406,0" href="page/techinfo.html" alt="Техническая информация">
  <area shape="poly" coords="449,24,501,24,525,0,473,0" href="page/study.html" alt="Обучение">
  <area shape="poly" coords="501,24,560,24,583,0,525,0" href="page/work.html" alt="Работа">
  <area shape="poly" coords="560,24,615,24,639,0,585,0" href="page/misk.html" alt="Разное">
  </map></p>
 </body>
</html>

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4.01 SpecificationРекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры ?

Internet ExplorerChromeOperaSafariFirefox
11311
AndroidFirefox MobileOpera MobileSafari Mobile
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Автор: Влад Мержевич
Последнее изменение: 02.01.2017
Редакторы: Влад Мержевич

Рекомендуем