<map>

Уютный контейнер для <area>.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Тег <map> — это обёртка для тега <area>, он нужен для связи с картинкой.

Пример

Секция статьи "Пример"
        
          
          <map name="doka-label">  <area  shape="poly"  coords="192,2,131,31,112,103,134,160,185,191,585,191,643,155,661,93,637,30,579,1"  href="/js/"  target="_blank"  alt="JS"></map><img usemap="#doka-label">
          <map name="doka-label">
  <area
  shape="poly"
  coords="192,2,131,31,112,103,134,160,185,191,585,191,643,155,661,93,637,30,579,1"
  href="/js/"
  target="_blank"
  alt="JS">
</map>
<img usemap="#doka-label">

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

У тега <map> должен быть атрибут name с уникальным именем, на которое мы будем ссылаться в атрибуте usemap картинки. А внутри тега может быть сколько угодно <area> — они размечают на картинке области-ссылки.

Как понять

Секция статьи "Как понять"

Поскольку тегов <area> может быть очень много, например на картинке с навигацией, без <map> пришлось бы связывать каждый <area> с единственной картинкой. К счастью, <map> служит удобной обёрткой, и ссылаться нужно только на него 😉

Подсказки

Секция статьи "Подсказки"

💡 Чтобы связь установилась верно, не забудьте поставить знак # перед именем внутри usemap.