🗺️ Вступ: Магія одного зображення
Уявіть, що ви створили карту Сонячної системи. Ви хочете, щоб під час натискання на Марс відкривалася стаття про Марс, а на Юпітер — про Юпітер. Але як це зробити, якщо на сторінці розміщено лише одне зображення?
Це називається карта посилань (image map). І це не просто теорія — ви можете спробувати це прямо зараз!
📌 Звідки матеріал: Цей урок базується на офіційній документації та прикладах із сайту W3Schools українською. Там ви знайдете короткий довідковий матеріал, а ми підготували максимально детальне пояснення з покроковими прикладами, спеціально адаптоване для школярів.
👇 Натисніть на монітор, телефон або чашку кави на зображенні нижче:
(Зверніть увагу: це справжні посилання. Вони відкриються в новій вкладці)
❓ Поміркуйте: як ви вважаєте, чи можна створити таку карту не лише з прямокутними, а й з круглими чи складними фігурними зонами? (Спойлер: так, і ми навчимося це робити далі).
📑 Зміст уроку
📖 Що таке карта посилань?
Звичайне посилання робить клікабельним усе зображення повністю. Але що робити, якщо нам потрібно, щоб різні частини одного зображення вели на різні сторінки?
Саме для цього існує карта посилань (image map).
Згідно з офіційною документацією, карта зображень — це зображення із клікабельними областями. Вони визначаються за допомогою HTML-тегу <map>, а самі клікабельні зони — за допомогою одного або кількох тегів <area>.
💡 Головна ідея карти зображень полягає в тому, що ви повинні мати можливість виконувати різні дії залежно від того, куди саме на зображенні ви натиснули.
Де це використовується в реальному житті?
Карти посилань роблять взаємодію з сайтом набагато цікавішою та зручнішою:
- Інтерактивні схеми. Уявіть сайт магазину електроніки. На головній сторінці висить гарне фото робочого столу. Ви натискаєте на монітор — вас перекидає на сторінку з моніторами. Натискаєте на клавіатуру — на сторінку з клавіатурами.
- Мапи приміщень. На інтерактивних екранах у торгових центрах або аеропортах ви бачите карту поверху. Клікнувши на зону кав’ярні, ви можете побачити її меню або графік роботи.
- Схеми будови (для навчання). На сайті з біології може бути схема серця. Натискаючи на різні камери чи клапани, ви переходите до статті з детальним описом цієї частини.
⚠️ Важлива примітка: Координати клікабельних зон задаються в пікселях і прив’язані до оригінального розміру зображення. Якщо ви будете зменшувати або збільшувати зображення за допомогою CSS (наприклад, щоб воно підлаштовувалося під екран телефона), клікабельні зони «з’їдуть» і перестануть збігатися з картинкою.
💻 Пишемо код: збираємо карту цілком
Давайте подивимося на повний код карти посилань для нашого робочого столу. Не лякайтеся, що його багато — насправді тут лише три логічні частини, які працюють як єдиний механізм.
<img src=”workplace.jpg” alt=”Робоче місце” usemap=”#workmap”>
<!– 2. КАРТА (невидимий контейнер) –>
<map name=”workmap”>
<!– 3. КЛІКАБЕЛЬНІ ЗОНИ –>
<area shape=”rect” coords=”34,44,270,350″ alt=”Комп’ютер” href=”computer.html”>
<area shape=”rect” coords=”290,172,333,250″ alt=”Телефон” href=”phone.html”>
<area shape=”circle” coords=”337,300,44″ alt=”Кава” href=”coffee.html”>
</map>
Як це працює разом?
Уявіть, що <img> — це телевізор, а <map> — це пульт. Щоб пульт керував саме цим телевізором, ми ставимо на телевізорі наліпку usemap="#workmap", а на пульті пишемо ім’я name="workmap". Вони знаходять одне одного за однаковою назвою!
🔍 Розбираємо кожну частину
Тепер, коли ви бачите картину цілком, давайте розберемо кожен рядок цього коду.
1. Зображення та місток до карти
Ми беремо звичайний тег <img> і додаємо до нього новий атрибут — usemap.
usemap="#workmap"— це посилання на нашу карту. Символ решітки#обов’язковий. Слово «workmap» — це унікальна назва нашої карти.
2. Контейнер для карти <map>
Цей тег створює невидимий шар поверх нашої картинки. Він має обов’язковий атрибут name.
name="workmap"— тут ми пишемо ту саму назву, що й уusemap, але вже без решітки. Саме так браузер розуміє, що цей «пульт» призначений для цього «телевізора».
3. Клікабельні зони <area>
Кожен тег <area> — це одна кнопка на нашій картинці. Вони розміщуються всередині <map>. У кожного з них є чотири головні атрибути: shape (форма), coords (координати), href (посилання) та alt (опис). Ми детально розберемо їх у наступному блоці.
📐 Геометрія карти: як розрахувати координати?
Найскладніше в картах посилань — це зрозуміти, звідки беруться цифри в атрибуті coords. Уявіть, що поверх будь-якого зображення накладено прозору сітку (як у зошиті в клітинку).
- Початок відліку (0,0) завжди знаходиться у верхньому лівому куті.
- Вісь X (горизонтальна) йде вправо.
- Вісь Y (вертикальна) йде вниз.
- Одиниця виміру — пікселі.
🟦 Прямокутник (rect)
🟢 Коло (circle)
🖼️ А тепер подивимося на реальну картинку!
Давайте покроково розберемо, як саме розрахувати координати для різних об’єктів на цьому фото.
Крок 1. Прямокутник (Комп’ютер)
Нам потрібно виділити ноутбук. Для прямокутника потрібно лише дві точки: лівий верхній кут і правий нижній.
Координати 34,44 (лівий верхній кут)
Координати 270,350 (правий нижній кут)
Результат: coords="34, 44, 270, 350"
Крок 2. Коло (Чашка кави)
Для кола потрібно знайти центр і виміряти радіус.
Координати центру 337,300
Радіус 44 пікселі
Результат: coords="337, 300, 44"
Крок 3. Багатокутник (Круасан)
А що робити, якщо фігура не рівна? Наприклад, круасан. Тут ми маємо обвести його по контуру, ставлячи крапки в кожному куті.
Ось наш круасан. Як його виділити?
Ми маємо знайти координати x та y для всіх країв круасана. Браузер подумки з’єднає ці точки лініями.
Кожна зелена крапка — це пара координат x,y.
Координати подаються попарно, одна для осі X та одна для осі Y:
Ось як виглядає результат. Ця область стає інтерактивною (доступною для натискання) і спрямовує користувача на сторінку “croissant.html”:
Клікабельна зона (виділена синім) точно повторює контур круасана.
💡 Порада: Вам не потрібно вираховувати ці координати вручну або на око. Існують безкоштовні онлайн-інструменти (наприклад, image-map.net), де ви просто малюєте фігури мишкою поверх картинки, а сайт сам генерує готовий HTML-код із точними координатами.
✅ Підсумок уроку
Ми розібрали, як зробити звичайне зображення інтерактивним. Ось головні думки, які варто запам’ятати:
1. Карта посилань — це зображення, різні частини якого ведуть на різні сторінки.
2. Головні теги: <img usemap="#..."> (саме зображення), <map name="..."> (контейнер для карти) та <area> (клікабельні зони).
3. Координати відраховуються від верхнього лівого кута (0,0). Вісь X йде вправо, вісь Y — вниз.
4. Форми зон: прямокутник (rect), коло (circle) та багатокутник (poly) для складних фігур.
🏆 Головна ідея: карта зображень перетворює звичайну картинку на зручну навігацію. Це чудовий інструмент для створення інтерактивних схем, мап та ігор на сайті.
📋 Шпаргалка: усе про карту посилань
Збережіть цей блок. Він допоможе вам швидко згадати синтаксис, коли ви будете створювати власні проєкти.
1. Повний шаблон коду
<img src=”your-image.jpg” alt=”Опис” usemap=”#my-map”>
<!– Карта з зонами –>
<map name=”my-map”>
<area shape=”rect” coords=”…” href=”…” alt=”…”>
<area shape=”circle” coords=”…” href=”…” alt=”…”>
</map>
2. Таблиця тегів та атрибутів
| Тег / Атрибут | Що робить | Приклад |
|---|---|---|
<img> | Додає зображення | <img src="photo.jpg"> |
usemap | Прив’язує зображення до карти (пишеться в тегу <img>) | usemap="#workmap" |
<map> | Створює контейнер для карти | <map name="workmap"> |
name | Задає ім’я карти (має збігатися з usemap без #) | name="workmap" |
<area> | Описує одну клікабельну зону | <area shape="rect" ...> |
3. Атрибути тегу <area>
| Атрибут | Опис | Приклад |
|---|---|---|
shape | Форма зони: rect, circle, poly, default | shape="rect" |
coords | Координати фігури в пікселях | coords="34,44,270,350" |
href | Посилання, куди перейде користувач | href="page.html" |
alt | Текстовий опис зони (для доступності) | alt="Комп'ютер" |
4. Приклади для різних форм
<area shape=”rect” coords=”34,44,270,350″ href=”link.html” alt=”Опис”>
// 2. Коло (потрібно 3 числа)
<area shape=”circle” coords=”337,300,44″ href=”link.html” alt=”Опис”>
// 3. Багатокутник (багато чисел)
<area shape=”poly” coords=”140,121,181,116,204,160…” href=”link.html” alt=”Опис”>
// 4. Вся область
<area shape=”default” href=”link.html”>