Что такое карта изображения в HTML?

Карта изображения (Image Map) в HTML – это способ создания интерактивных областей (ссылок) на изображении. Она позволяет назначать разные ссылки на разные части одной картинки, что делает изображение кликабельным в определённых зонах.

1. Как работает карта изображения?

Карта изображения создаётся с помощью двух элементов:

• <img> – отображает изображение с атрибутом usemap.
• <map> – определяет области на изображении и содержит <area>-теги для создания активных зон.

Пример использования карты изображения

<img src="world-map.jpg" usemap="#worldmap" alt="Карта мира" width="600">

<map name="worldmap">
    <area shape="rect" coords="50,50,150,150" href="https://ru.wikipedia.org/wiki/Россия" alt="Россия">
    <area shape="circle" coords="300,200,50" href="https://ru.wikipedia.org/wiki/Франция" alt="Франция">
    <area shape="poly" coords="400,100,450,200,350,200" href="https://ru.wikipedia.org/wiki/Италия" alt="Италия">
</map>

2. Атрибуты <area>

3. Разбор параметров

• shape="rect" (прямоугольник) → coords="x1,y1,x2,y2"
• shape="circle" (круг) → coords="x,y,радиус"
• shape="poly" (многоугольник) → coords="x1,y1,x2,y2,x3,y3,..."

Пример разных областей:

<map name="example">
    <area shape="rect" coords="10,10,100,100" href="page1.html" alt="Прямоугольник">
    <area shape="circle" coords="150,150,50" href="page2.html" alt="Круг">
    <area shape="poly" coords="200,50,250,100,150,100" href="page3.html" alt="Многоугольник">
</map>

4. Проверка координат

Чтобы узнать координаты, можно:

<img src="image.jpg" id="mapImage" width="600">
<p id="coords"></p>

<script>
    document.getElementById("mapImage").addEventListener("click", function (event) {
        document.getElementById("coords").textContent = `X: ${event.offsetX}, Y: ${event.offsetY}`;
    });
</script>

5. Ограничения и альтернативы

Минусы <map> и <area>

• Не адаптируется под мобильные устройства.
• Трудно настраивать координаты вручную.
• Не поддерживает сложные интерактивные элементы.

Современные альтернативы

• SVG с <a>-ссылками
• CSS + JavaScript для интерактивных изображений

Пример использования SVG:

<svg width="600" height="400">
    <a href="https://example.com">
        <rect x="50" y="50" width="100" height="100" fill="blue"></rect>
    </a>
</svg>

Итог

Карта изображений полезна для статических схем и карт, но для сложных интерактивных элементов лучше использовать * SVG* и JavaScript.