HTML тег <area>

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

Тег <area> всегда располагается в теге <map>. Активные области могут наслаиваться друг на друга, в этом случае при нажатии будет активирована та область, которая в коде HTML находится выше.

Синтаксис

Тег <area> парный, закрывающий тег обязателен.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>Нажмите на логотип или на один из элементов логотипа, чтобы посмотреть его ближе:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"  width="250" height="150" alt="block" usemap="#blockmap">
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png">
      <area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png">
      <area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png">
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/">
    </map>
  </body>
</html>

Результат

Атрибуты

Атрибут Значение Описание
alt text Указывает альтернативный текст для активной области.
coords Указывает координаты активной области.
x1,y1,x2,y2 - верхний левый и правый нижний угол прямоугольника (shape="rect")
x,y,радиус - центр окружности и радиус (shape="circle")
x1,y1,x2,y2,...,xn,yn - вершины полигона (многоугольника) (shape="poly")
download filename Указывает, что при нажатии на определенный участок, файл должен быть загружен (пользователю будет предложено сохранить файл).
href URL Указывает ссылку для перехода.
hreflang language_code Определяет язык документа, на который ведет ссылка. Используется только с атрибутом href.
media media query Определяет для каких типов устройств будет оптимизирован указанный URL. Значением может быть любой медиа-запрос.
nohref value Определяет область, не содержащую ссылки на другой документ.
Не поддерживается в HTML.
rel Устанавливает связь между текущим и связанным документами.
alternate - ссылка на альтернативную версию документа
author - ссылка на автора документа
bookmark - постоянная ссылка на документ
help - ссылка на документ со справкой
license ссылка на страницу с лицензионным соглашением или авторскими правами
next - ссылка на следующую страницу/раздел
nofollow - указывает, что поисковик не должен передавать по ссылке ТИЦ и PR.
noreferrer - Указывает, что браузер не должен не посылать HTTP-заголовок, если пользователь перешел по ссылке
prefetch - указывает, что следует кэшировать связанный документ
prev - ссылка на предыдущую страницу/раздел
search - ссылка на поиск для документа
tag - Определяет тег (метку) в текущем
shape Определяет форму области
default - oбласть по умолчанию (прямоугольная)
rect - прямоугольная область
circle - область в форме круга
poly - многоугольная
target Указывает, как должен открываться связанный документ.
Не поддерживается в HTML5.
_blank - в новом окне
_self - в текущем окне
_top - во всю ширину окна
_parent -в родительском фрейме
frame_name - во фрейме
type media_type Указывает MIME-тип (спецификация для передачи по сети файлов различного типа) связанного документа.

Тег <area> также поддерживает глобальные атрибуты и атрибуты событий.

Browser support




Related articles