Тег <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> также поддерживает глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Практикуйте свои знания
Какие атрибуты можно использовать с HTML-тегом <area>?
Правильный!
Неправильно!