Опубликовано: 25.06.2010 Последняя правка: 08.12.2015

Тег <AREA>

Тег <AREA> применяется внутри элемента <MAP>. Необходим для определения областей изображения, при нажатии на которые будут активироваться ссылки на другие документы. Эти области называются картой изображений (image map). Адреса открываемых документов (URL) также задаются этим тегом.

URL могут быть относительными и абсолютными. Относительные URL — адреса относительно текущей страницы или корня сайта. Работают только в пределах текущего сайта. Абсолютные URL — включают полный адрес документа и действуют везде, где указаны: на любом сайте, на локальном компьютере.

Любое изображение можно использовать как карту изображений. Координаты отсчитываются от левого верхнего угла изображения по осям X и Y.

Атрибуты

Личные атрибуты:

alt — Обязательный атрибут. Альтернативный текст для браузеров, которые не могут отобразить изображение.
coords — Задает координаты области.
href — Задает путь к документу, который связан с конкретной областью.
nohref — Указывает, что область не имеет ссылки на документ.
shape — Задает тип формы области.
target — Задает имя окна или фрейма, в котором будет открыт документ.

Общие атрибуты:

accesskey — устанавливает клавишу быстрого доступа для фокусировки на элементе.
class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
dir — указывает направление текста внутри элемента.
id — задает имя идентификатора тега, который может использоваться в качестве «якоря» или в таблицах стилей.
lang — указывает язык, на котором написан текст внутри элемента.
style — необходим для применения встроенных стилей CSS к тегу.
tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
title — выводит всплывающую подсказку при наведении курсора мыши на элемент.

Тип тега

Назначение: изображения.

Модель тега: располагается внутри элемента <MAP>.

Может содержать: данный элемент является пустым/Empty.

Открывающий тег: необходим. Закрывающий тег: запрещен.

Синтаксис

<area alt="текст">

Пример HTML: применение тега AREA

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега AREA</title>
 </head>
 <body>
  <p><img src="images/wild.png" width="640" height="142" usemap="#header" alt="Салон красоты Wild kitties">
   <map name="header">
    <area href="files/home.html" shape="poly" coords="19,71,104,71,109,85,104,98,19,98,11,85" alt="Главная">
    <area href="files/novosti.html" shape="poly" coords="126,71,211,71,216,85,211,98,126,98,118,85" alt="Новости">
    <area href="files/uslugi.html" shape="poly" coords="233,71,318,71,323,85,318,98,233,98,225,85" alt="Услуги">
    <area href="files/o_nas.html" shape="poly" coords="339,71,424,71,429,85,424,98,339,98,331,85" alt="О нас">
   </map></p>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
Поддержка:	Да	Да	Да	Да

Поддержка браузерами

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Да	Да