HTML таг `map`

Пример

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

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

<map name="worldmap">
  <area shape="rect"
        coords="10,20,120,80"
        href="https://bg.wikipedia.org/wiki/Европа"
        alt="Европа"
        title="Научи повече за Европа">

  <area shape="circle"
        coords="220,120,40"
        href="https://bg.wikipedia.org/wiki/Африка"
        alt="Африка"
        title="Научи повече за Африка">

  <area shape="poly"
        coords="320,40,380,60,360,120,300,100"
        href="https://bg.wikipedia.org/wiki/Азия"
        alt="Азия"
        title="Научи повече за Азия">
</map>

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

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

Тагът <map> се използва за дефиниране на картa на изображение (image map) – област от изображение, в която различни зони могат да бъдат кликаеми и да водят към различни линкове или действия.

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

За да свържете изображение с карта, използвате атрибута usemap на елемента <img>, чиято стойност трябва да съвпада с атрибута name на <map> (с добавен # отпред):

<img usemap="#myMap"> – указва, че изображението използва карта с име myMap.
<map name="myMap">...</map> – дефинира самата карта и областите в нея.

Типичната употреба е за интерактивни схеми, карти, планове на сгради, инфографики и други изображения, в които различни части трябва да водят към различна информация или страници.

Browser Support

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

Атрибути

Атрибут	Описание
`name`	Задава името на картата. Това име се използва от атрибута `usemap` на елемента `<img>`, за да се свърже изображението с картата (напр. `<img usemap="#myMap">` и `<map name="myMap">`).

Тагове

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 таг map