Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

HTML тег <area>

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

Описание

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

Элемент <area> используется только совместно с тегом <map> в качестве его дочернего элемента.

Атрибуты

alt:
Определяет альтернативный текст, который будет виден вместо изображения, если оно не может быть отображено (из-за медленной связи, ошибки в атрибуте src и тд).
coords:
Атрибут coords указывает координаты активной области на карте-изображения. Он используется вместе с атрибутом shape для указания размера, формы и размещения активной области. Возможные значения атрибута:
  • x1,y1,x2,y2 - указывает координаты верхнего левого и правого нижнего угла прямоугольника (shape="rect").

    Определение координат для прямоугольника (shape="rect"):

    координаты прямоугольника

  • x,y,радиус - определяет координаты центра окружности и радиус (shape="circle").

    Определение координат для окружности (shape="circle"):

    координаты окружности

  • x1,y1,x2,y2,...,xn,yn - определяет координаты вершин полигона (многоугольника) (shape="poly").

    Определение координат для многоугольника (shape="poly"):

    координаты многоугольника

Примечание: координаты верхнего левого угла области - 0,0.

Пример »
href:
Атрибут href указывает адрес страницы, на которую ведет ссылка с активной области изображения, если он не указан или пропущен, то тег <area> не будет являться гиперссылкой. (адрес может быть либо абсолютным либо относительным)
hreflang:
Указывает двухбуквенный код языка, определяющий язык страницы, доступной по ссылке. Используется только совместно с атрибутом href и имеет исключительно информативный характер. Пример »
media:
Атрибут media определяет тип документа, на который ведет ссылка или указывает, тип устройства, для которого предназначается ссылка (пример: мобильный телефон, принтер и тд.).

Атрибут может принимать несколько значений и используется только совместно с атрибутом href.
rel:
Атрибут rel определяет отношение между текущим документом и связанным. Возможные значения атрибута:
  • alternate - ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.).
  • author - ссылка на автора документа.
  • bookmark - постоянный URL-адрес, используемый для закладок.
  • help - ссылка на документ-справку.
  • license - ссылки на сведения об авторских правах для документа.
  • next - следующий документ в выделенной области.
  • nofollow - ссылка на неиндексируемый документ («nofollow» используется в Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке).
  • noreferrer - указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылке.
  • prefetch - указывает, что следует кэшировать целевой документ.
  • prev - предыдущий документ в выделенной области.
  • search - ссылка на поиск для документа.
  • tag - тег (ключевое слово) для текущего документа.
Атрибут rel используется только совместно с атрибутом href. Пример »
shape:
Атрибут shape указывает форму области. Он используется совместно с атрибутом coords для указания размера, формы и размещения активной области. Возможные значения атрибута:
  • default - определяет весь регион.
  • rect - определяет прямоугольную область.
  • circle - определяет круглую область.
  • poly - определяет многоугольную область.
target:
Атрибут target определяет, где будет открыт документ, при переходе по ссылке. Используется только вместе с атрибутом href. Возможные значения атрибута:
  • _blank - открывает документ в новом окне или вкладке.
  • _parent - открывает документ в родительском фрейме.
  • _self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
  • _top - открывает документ во всю ширину окна.
  • имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.
Пример »
type:
Атрибут type указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка. Используется только совместно с атрибутом href. Пример »

Примечание: атрибут usemap в теге <img> связан с атрибутом name элемента <map>, и создает связь между картинкой и картой.

Тег <area> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

area {
    display: none;
} 

Пример

<img src="image.png" width="104" height="96" alt="numbers" usemap="#num1">
<map name="num1">
  <area shape="rect" coords="3,2,55,47" href="#" alt="kubik1">
</map>
<p>Ссылка расположена на кубике 1, наведите курсор, чтобы убедиться</p>

Результат данного примера в окне браузера:

Пример использования тега <area> Кубик с номером 1
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru