<area> – Елемент області на карті зображення

Елемент HTML <area> (область) визначає область всередині карти зображення, що має наперед визначені області для клацання. Карта зображення дозволяє зв'язувати геометричні області на зображенні з гіпертекстовими посиланнями.

Цей елемент використовується лише всередині елемента <map>.

Спробуйте його в дії

Атрибути

Серед атрибутів цього елемента присутні глобальні атрибути.

alt

Альтернативний рядок тексту, для виведення у браузерах, що не виводять зображення. Цей текст повинен бути виражений так, щоб представляти користувачам вибір такого ж роду, як і зображення, коли воно відображається без альтернативного тексту. Цей атрибут є обов'язковим лише тоді, коли вжито атрибут href.

coords

Атрибут coords визначає координати атрибута shape щодо розміру, форми та розташування елемента <area>. Цей атрибут не повинен використовуватися, якщо shape має значення default.

• rect: значення – x1,y1,x2,y2. Це значення задає координати верхнього лівого та нижнього правого кутів прямокутника. Наприклад, у <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="WebDoky"> ці координати – 0,0 та 253,27, що вказує на верхній лівий та нижній правий кути прямокутника відповідно.
• circle: значення – x,y,radius. Це значення задає координати центру кола та його радіус. Наприклад: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="WebDoky">.
• poly: значення – x1,y1,x2,y2,..,xn,yn. Це значення визначає координати країв багатокутника. Якщо перша та остання пари координат не є однаковими, браузер додасть останню пару координат, щоб закрити багатокутник.

Ці значення – числа пікселів CSS.

download

Цей атрибут, якщо він є, позначає те, що автор має намір використовувати гіперпосилання для завантаження ресурсу. Дивіться повний опис атрибута download на сторінці <a>.

href

Ціль гіперпосилання області. Значення – дійсний URL. Цей атрибут можна пропустити; якщо він пропущений, то цей елемент <area> не представляє гіперпосилання.

ping

Вміщає розділений комами список URL, до яких, коли гіперпосилання використано, браузер відправить (в фоновому режимі) запити POST з тілом PING. Зазвичай використовується для відстеження.

referrerpolicy

Рядок, що позначає те, якого посилача використовувати при отриманні ресурсу:

• no-referrer: Заголовок Referer не буде надіслано.
• no-referrer-when-downgrade: Заголовок Referer не буде надіслано до походжень без TLS (HTTPS).
• origin: Надісланий посилач буде обмежений до походження сторінки-посилача: її схеми, хоста та порту.
• origin-when-cross-origin: Посилач, надісланий іншим походженням, буде обмежений схемою, хостом і портом. Переходи в межах того ж самого походження включатимуть в посилач увесь шлях.
• same-origin: Посилач буде надісланий в межах того самого походження, а запити до інших походжень не міститимуть інформації про посилача.
• strict-origin: Надсилати походження документа як посилача, коли рівень безпеки протоколу залишається таким самим (HTTPS→HTTPS), але не надсилати його менш безпечному призначенню (HTTPS→HTTP).
• strict-origin-when-cross-origin (усталене): Надсилати повний URL при виконанні запитів за тим самим походженням, надсилати лише походження, коли рівень протоколу безпеки залишається таким самим (HTTPS→HTTPS), і не надсилати заголовок менш безпечному призначенню (HTTPS→HTTP).
• unsafe-url: Посилач уміщатиме походження та шлях (але не фрагмент, не пароль і не ім'я користувача). Це значення є небезпечним, оскільки воно випускає походження та шляхи з ресурсів, захищених TLS, до незахищених походжень.

rel

Для якорів, що вміщають атрибут href, цей атрибут визначає відношення об'єкта-цілі до об'єкта-посилання. Значення – список типів посилань, розділених пробілами. Значення та їхня семантика реєструються певним органом, що може мати значення для автора документа. Усталене відношення, якщо не задано іншого, – пусте. Цей атрибут слід використовувати лише тоді, коли присутній атрибут href.

shape

Форма пов'язаної активної ділянки. Специфікації HTML визначають значення rect, що визначає прямокутну область; circle, що визначає кругову область; poly, що визначає багатокутник; та default, що позначає всю область поза будь-якими визначеними формами.

target

Ключове слово або визначена автором назва контексту перегляду для виведення сполученого ресурсу. Наступні ключові слова мають особливі значення:

• _self (усталене): Показати ресурс у поточному контексті перегляду.
• _blank: Показати ресурс у новому, безіменному контексті перегляду.
• _parent: Показати ресурс у контексті перегляду, що є батьківським відносно поточного, якщо поточна сторінка знаходиться всередині фрейму. Якщо батьківського контексту немає, то це значення працює так само, як _self.
• _top: Показати ресурс у контексті перегляду найвищого рівня (контексті перегляду, що є предком поточного та не має батьківського контексту). Якщо батьківського контексту немає, то це значення працює так само, як _self.

Цей атрибут слід використовувати лише тоді, коли присутній атрибут href.

Примітка: Задання на елементах <area> target="_blank" неявно задає таку ж логіку rel, як задання rel="noopener", який не задає window.opener. Дивіться статус підтримки у Сумісності з браузерами.

Приклади

<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Клацнути, щоб піти ліворуч" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Клацнути, щоб піти праворуч" />
</map>
<img
  usemap="#primary"
  src="https://via.placeholder.com/350x150"
  alt="350 x 150 pic" />

Результат

Технічний підсумок

Специфікації

Сумісність із браузерами