Перейти к содержанию

<area>

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

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

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

Синтаксис

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

Закрывающий тег не требуется.

Атрибуты

alt
Альтернативный текст для области изображения.
coords
Координаты активной области.

download

href
Задаёт адрес документа, на который следует перейти.
hreflang
Указывает язык документа, на который ведёт ссылка.

media

rel

shape
Форма области.
target
Имя фрейма, куда браузер будет загружать документ.
type
Устанавливает MIME-тип документа, на который ведёт ссылка.

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

alt

Атрибут alt устанавливает альтернативный текст для области изображения. Такой текст не отображается в браузере, но поисковые системы его могут прочитать.

Синтаксис

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

Значения

Любая подходящяя текстовая строка.

Значение по умолчанию

Нет.

coords

Атрибут coords устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.

Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.

Синтаксис

<area coords="<координата 1>, <координата 2>, <координата 3>, ..." />

Значения

Набор координат определяется формой «горячей области», которая задается атрибутом shape. Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.

Для прямоугольника (shape="rect") определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.

Рис. 1. Координаты для прямоугольника

Для окружности (shape="circle") определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.

Рис. 2. Координаты для окружности

Для полигона (многоугольника) (shape="poly") последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.

Рис. 3. Координаты для полигона

Значение по умолчанию

Нет.

href

Атрибут href задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущую вкладку браузера, однако это поведение можно изменить с помощью атрибута target.

Синтаксис

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

Значения

В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.

Значение по умолчанию

Нет.

hreflang

Атрибут hreflang указывает язык документа, на который ведёт ссылка активной области изображения.

Синтаксис

<map>
  <area href="<адрес>" hreflang="<язык>" />
</map>

Значения

Код языка

Значение по умолчанию

Нет.

shape

Атрибут shape определяет форму «горячей области», координаты которой задаются с помощью атрибута coords.

Синтаксис

<area shape="circle | default | poly | rect" />

Значения

circle
Область в виде окружности.
default
Указывает всю область.
poly
Область в виде полигона (многоугольника).
rect
Прямоугольная область.

Значение по умолчанию

  • rect

target

Атрибут target определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.

Синтаксис

<area target="<значение>" />

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён используются следующие.

_blank
Загружает страницу в новую вкладку браузера.
_self
Загружает страницу в текущую вкладку.
_parent
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.

Значение по умолчанию

  • _self

type

Атрибут type устанавливает MIME-тип документа, на который ведёт ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type должен добавляться только при наличии атрибута href.

Синтаксис

<area href="<адрес>" type="<MIME-тип>" />

Значения

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="https://via.placeholder.com/640x158.png?text=xsltdev.ru"
        width="640"
        height="158"
        alt="Детский образовательный центр"
      />
      <br /><br />
      <img
        src="https://via.placeholder.com/640x30.png?text=xsltdev.ru"
        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>

Ссылки