Справочник HTML & CSS

<map>, <area>

Карта ссылок на картинке: разные области изображения ведут по разным адресам.

Синтаксис

<map name="m"><area shape="rect" coords="…" href="…" alt="…"></map>

Атрибуты

Параметр	Тип	Описание
name	text	Имя карты; картинка ссылается на него через `usemap="#name"`.
shape	rect \| circle \| poly	Форма области `<area>`.
coords	numbers	Координаты области в пикселях картинки.
href, alt	URL, text	Куда ведёт область и её описание.

Примеры

Две кликабельные области на фото:

<img src="/media/photo-400x250.jpg" alt="Coffee shop" width="400" height="250" usemap="#shop">
 
<map name="shop">
  <area shape="rect" coords="0,0,200,250" href="#left" alt="Left half">
  <area shape="circle" coords="300,125,60" href="#right" alt="Circle on the right">
</map>

Примечания

Координаты задаются в пикселях исходного размера и не масштабируются вместе с резиновой картинкой — поэтому на адаптивных сайтах карты используют редко и чаще накладывают ссылки поверх картинки через CSS или SVG.

См. также

<img> — Картинка.
<a> — Ссылка на другую страницу, файл или место на странице.

В учебнике

Изображения — Тег img, атрибуты src и alt, размеры, подпись figure и figcaption, форматы картинок и отложенная загрузка.

Спасибо, что читаете!