area

Содержание

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

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

Синтаксис

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

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

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

Атрибуты

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

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>AREA</title>
  <style type="text/css">
   #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Рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
11311
AndroidFirefox MobileOpera MobileSafari Mobile
1161

См. также





Рекомендую хостинг: beget.ru

Сервер падал:110 дн. 22:56 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru