тег area

Тег <area>

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
43.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> определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Тег <area> задает форму области, ее размеры, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <map>, который связывает координаты областей с изображением.

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

Синтаксис

HTML: < 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">

#title {

line-height: 0;/* Изменяем межстрочное расстояние */

}

#title img {

border: none;/* Убираем рамку вокруг изображения */

}

</style>

</head>

<body>

<div id="title"><img src="images/ecctitle.png" width="640" height="158"

alt="Детский образовательный центр"><br>

<img src="images/navigate.png" width="640" height="30" alt="Навигация по сайту"

usemap="#Navigation"></div>

<p><map id="Navigation" name="Navigation">

<area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация">

<area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="Мероприятия">

<area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="Отделения">

<area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="Техническая информация">

<area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="Обучение">

<area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Работа">

<area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Разное">

</map></p>

</body>

</html>

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