Использование тега <map> в HTML для создания карты изображений

Тег <map> в HTML поддерживает создание карты изображений. Карта изображений - это изображение, которое имеет несколько "активных областей", каждая из которых - это ссылка на разные цели. Такие карты полезны для сложных изображений, содержащих множество элементов, или для развлекательных веб-сайтов, таких как онлайн игры или интерактивные инфографики.

Вот базовый пример его использования:

<img src="planets.jpg" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.html" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
</map>

В этом примере мы имеем изображение солнечной системы, и мы определили три активные области: прямоугольник для Солнца и две круглые области для Меркурия и Венеры. Каждая активная область ведет на свою страницу с информацией.

Для создания активных областей используется тег <area>. Наиболее важные атрибуты для <area> это shape (форма области: может быть rect для прямоугольника, circle для круга и poly для полигона) и coords (координаты области). Координаты зависят от формы. Для rect это x1, y1, x2, y2. Для circle это центр x, центр y, радиус. Для poly это список координат x, y для каждой вершины полигона.

Тег <map> - это ценный инструмент для создателей веб-сайтов, обеспечивающий большую интерактивность и разнообразие. Однако, как и в любом другом вопросе доступности, при его использовании важно убедиться, что информация на изображении также доступна в других форматах для тех, кто не может ее увидеть.