HTML таг `area`

Пример

Кратък пример как се използва тагът <area>.

<img src="world-map.png" alt="Карта на света" usemap="#worldmap" class="img-fluid">

<map name="worldmap">
  <area shape="rect" coords="10,10,110,80" href="europe.html" alt="Европа">
  <area shape="circle" coords="200,120,40" href="asia.html" alt="Азия">
  <area shape="poly" coords="300,50,350,80,340,130,290,110" href="africa.html" alt="Африка">
</map>

Опитай в редактора

Дефиниция и употреба

Виж как се ползва тагът <area>.

<area> дефинира интерактивна област (гореща зона) в изображение, което е свързано с карта на изображение чрез елемента <map>. Тези области могат да бъдат кликаеми и да водят към различни линкове или да задействат различни действия, в зависимост от координатите им върху изображението.

Елементът <area> винаги се използва вътре в <map> и се свързва с изображение чрез атрибута usemap на <img>. Всяка област се описва с форма (shape) и координати (coords), които определят точната ѝ позиция и размер върху изображението. Обичайните форми са правоъгълник (rect), кръг (circle) и многоъгълник (poly).

Най-често <area> се използва като линк чрез атрибута href, подобно на <a>, и трябва да има описателен alt текст за по-добра достъпност и за потребители на екранни четци. Елементът е празен (няма затварящ таг и не съдържа вътрешно съдържание) и разчита изцяло на атрибутите си, за да определи поведението и видимостта на интерактивната област.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути

Атрибут	Описание
`alt`	Алтернативен текст, описващ областта. Задължителен за достъпност.
`coords`	Списък с координати, които определят позицията и размера на областта спрямо изображението. Форматът зависи от `shape`.
`shape`	Формата на областта: `rect`, `circle`, `poly` или `default`.
`href`	URL адресът, към който води областта. Прави областта кликаема като линк.
`target`	Определя къде да се отвори линкът (`_self`, `_blank` и др.).
`download`	Указва, че линкът трябва да изтегли ресурс вместо да го отваря.
`rel`	Определя връзката между текущия документ и свързания ресурс (напр. `noopener`, `noreferrer`).
`referrerpolicy`	Контролира каква информация за реферера да се изпраща при заявката.

Тагове

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fencedframe fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select selectedcontent slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

HTML таг area