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>