HTML с нуля: Как сделать карту изображения в HTML (навигационная карта). Урок №15

Карта изображения (image map) — это способ сделать отдельные области на картинке кликабельными. Каждая область может вести на свою ссылку, как будто изображение «разбивается» на несколько интерактивных зон.

Это полезно, если вам нужно создать:

• интерактивную карту страны;

• план помещения с кликабельными комнатами;

• навигацию по схеме товара;

• меню по изображению.

В этом уроке разберём основные теги, покажем примеры и создадим простую навигационную карту.

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

Карта изображения — это набор областей (<area>), которые привязаны к изображению через тег <map>. Каждая область — это кликабельная зона с координатами.

<img src="image.jpg" usemap="#example-map">

<map name="example-map">
<area shape="rect" coords="" href="">
</map>

2. Основные теги

<img>

К обычному изображению добавляется атрибут usemap:

<img src="karta.jpg" usemap="#nav-map">

<map>

Контейнер для областей:

<map name="nav-map"></map>

<area>

Определяет кликабельную зону. Главные атрибуты:

• shape — форма: rect, circle, poly

• coords — координаты (в пикселях)

• href — ссылка

• alt — описание области

1) Прямоугольник (rect)

<area shape="rect" coords="10,10,200,100" href="section1.html">

Задает две точки: лево-верх и право-низ.

2) Круг (circle)

<area shape="circle" coords="150,150,50" href="about.html">

Координаты: центр X, центр Y, радиус.

3) Многоугольник (poly)

<area shape="poly" coords="50,50, 150,50, 150,150, 50,150" href="contact.html">

Количество точек не ограничено.

3. Практический пример: кликабельная схема

Допустим, у нас есть баннер с тремя зонами.

<img src="banner.jpg" usemap="#banner-map" width="600" alt="Навигационный баннер">


<map name="banner-map">
<area shape="rect" coords="0,0,200,200" href="/catalog" alt="Каталог">
<area shape="rect" coords="200,0,400,200" href="/about" alt="О нас">
<area shape="rect" coords="400,0,600,200" href="/contacts" alt="Контакты">
</map>

Каждая часть баннера становится ссылкой.

4. Как узнать координаты?

Есть несколько способов:

1) Открыть изображение в графическом редакторе

Подойдут:

• Photoshop

• GIMP

• Figma

• Онлайн-сервисы

Там можно увидеть координаты любой точки.

2) Использовать онлайн‑генераторы image map

Есть десятки инструментов, позволяющих выделять зоны мышкой. Они автоматически формируют HTML‑код.

3) С помощью DevTools

В браузере можно смотреть размер изображения и рассчитывать координаты.

5. Важные нюансы

 1. Размеры должны совпадать

Если вы уменьшаете изображение CSS‑ом, карта «съезжает».
Используйте width прямо в <img>.

2. Для адаптивности нужны дополнительные решения

Стандартная image map не масштабируется автоматически.
Для адаптивных сайтов используют JS‑библиотеки вроде image-map-resizer.

 3. Обязательно указывайте alt

Это улучшает доступность.

6. Полный итоговый пример

<img src="plan.jpg" usemap="#plan-map" width="800" alt="Интерактивный план">


<map name="plan-map">
<area shape="rect" coords="30,40,200,160" href="/kitchen" alt="Кухня">
<area shape="circle" coords="400,200,60" href="/living-room" alt="Гостиная">
<area shape="poly" coords="500,50, 650,50, 650,200, 580,250, 500,200" href="/bedroom" alt="Спальня">
</map>