Главная/ Cправочник HTML, CSS, Javascript/ HTML справочник : HTML теги, HTML атрибуты, мета теги, спецсимволы/ Tags/ HTML тег area | назначение, синтаксис, атрибуты, примеры

Тег area

Последнее обновление: 22.01.2011

Тег area (с англ. область) применяется внутри контейнера <map> для создания карты-изображения. Определяет параметры активных зон-ссылок на карте.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<area href="URL" alt="..."/>

Атрибуты



accesskey горячая клавиша (+Alt) для элемента
alt альтернативный текст. Выводится в виде всплывающей подсказки. Также отображается, если картинки отключены
class определяет имя используемого класса
coords координаты фигуры, задающие ссылку

  • для shape=»rect» координаты диагонали x1,y1,x2,y2
  • для shape=»circle» центр и радиус x,y,R
  • для shape=»poly» пары значений вершин полигона x1,y1,x2,y2,…,xN,yN
disabled флаг. Делает элемент недоступным.
Отсутствует в спецификации HTML 4.01!
href задает адрес документа (объекта), на который следует перейти
id уникальный идентификатор
name уникальное имя элемента.
Отсутствует в спецификации HTML 4.01!
nohref задает неактивную область
onblur потеря фокуса элементом
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onfocus получение фокуса элементом
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
shape тип геометрической фигуры

  • rect – прямоугольник (по умолчанию);
  • circle – окружность;
  • poly – многоугольник.
style задает встроенную таблицу стилей
target имя окна или фрейма, где будет открыт документ, который указан в href. В качестве аргумента используется имя окна или фрейма.
Зарезервированные имена:

  • _blank — откроет документ в новом окне
  • _parent — откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне.
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фремов нет, откроет в текущем окне
  • _self — откроет в текущем окне (по умолчанию)
tabindex порядок обхода элементов с помощью Tab
title добавляет всплывающую подсказку

Пример

код:


<map name="myMap" id="myMap">
<area nohref="nohref" alt="тут ссылки нет" title="тут ссылки нет" shape="circle" coords="70,138,39"/>
<area href="#" alt="Серая зона" title="Серая зона" shape="rect" coords="20,10,118,188"/>
<area href="#" alt="Желтая зона" title="Желтая зона" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src="map.png" width="300" height="200" alt="карта" usemap="#myMap"/>

Рекомендации по использованию

  • должен быть закрыт слешем (<area…/>)
  • должен располагается только внутри контейнера <map>
  • атрибут alt обязателен

Тег map определяет клиентскую карту (или другой механизм навигации), который может быть ассоциирован с другими элементами (<img>, <object>, <input>). Карта ассоциируется с элементом с помощью атрибута usemap. Тег map может использоваться без ассоциированного изображения для механизмов общей навигации.

Внутри контейнера map можно комбинировать:

  • Один или более элементов area. Эти элементы не имеют содержимого, но определяют геометрические регионы карты изображений и гиперссылки, ассоциированные с каждым регионом.
  • Содержимое уровня блока. Это содержимое должно включать <теги a>, которые специфицируют геометрические регионы карты и ссылки, ассоциированные с каждым регионом.

Если map имеет смешанное содержимое (и теги area, и блочные элементы), браузеры, согласно спецификации HTML 4.01, должны игнорировать элементы area.

Если регионы перекрываются, элемент, определяющий регион, который появился раньше в документе, имеет приоритет.

Рекомендуется предоставлять текстовую альтернативу графической карте для тех случаев, когда графика недоступна или пользователь не может её получить. Альтернативный текст добавляет значения страницы в глазах поисковых систем.

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

При использовании фигуры poly хорошей практикой считается указывать последние координаты, равные первым, для логического заверщения фигуры.

Твой код:

Результат: