Карта зображень

Карта зображень (англ. image map, іноді сенсорна карта або графічна карта) — у HTML та XHTML це список координат, пов'язаний із конкретним зображенням та містить спеціальні области (активні зони), при натисканні яких відбувається перехід за певним гіперпосиланням (на відміну від звичайного посилання на зображення, в якому вся область зображення посилається на одне джерело). Наприклад, кожна країна може мати гіперпосилання на мапі світу з додатковою інформацією про цю країну. Мета карти зображень полягає в тому, щоб забезпечити простий спосіб зв’язування різних частин зображення без поділу зображення на окремі файли зображень.

Наприклад на цьому зображенні континенти є гіперпосиланнями:

Приклад з континентами

На стороні сервера

Карти зображень на стороні сервера (server-side) вперше підтримувалися в веб-браузері Mosaic 1.1 версії^[1]. Карти зображень на стороні сервера дозволяють веб-браузеру надсилати на сервер інформацію про позицію натискання користувачем у межах зображення. Це дозволяє серверу приймати попіксельні рішення про те, який вміст повернути у відповідь (можливими методами є використання шарів маски зображення, запитів до бази даних або файлів конфігурації на сервері). HTML-код для цього типу карти зображень на стороні сервера вимагає, щоб теґ <img> був всередині теґу прив’язки <a>...</a>, а <img> містив атрибут ismap.

<a href="/imagemapper"><img src="image.png" ismap /></a>

Коли користувач клацне всередині зображення, браузер додасть координати X і Y (відносно верхнього лівого кута зображення) до прив’язки URL-адреси у вигляді рядка запиту та отримає доступ до отриманої URL-адреси^[2] (наприклад, /imagemapper?3,9). Якщо браузер не підтримує ismap, рядок запиту не можна додавати до прив’язки URL-адреси, і сервер має відповідати належним чином (наприклад, повернути лише сторінку текстової навігації).

На стороні клієнта

Карти зображень на стороні клієнта (client-side) були представлені в HTML 3.2 і не вимагають спеціальної логіки для виконання на сервері (вони повністю є клієнтськими). Вони також не потребують JavaScript.

Чистий HTML

Карта зображень на стороні клієнта в HTML складається з двох частин:

1. Зображення, яке вбудовано за допомогою теґа <img>. Теґ зображення має містити атрибут usemap, який визначає карту зображень, яка буде використовуватися для цього зображення (на одній сторінці може існувати кілька карт зображень).
2. Елемент <map>, і всередині нього елементи <area>, кожен з яких визначає одну клікабельну область у межах зображення. Вони схожі на теґ <a>, що визначає, яку URL-адресу слід відкривати для звичайного веб-посилання. В атрибуті name теґа <map> вказується унікальний в межах документа ідентифікатор карти. Може бути надано атрибут title, який відображає підказку, якщо користувач наводиться на область. З міркувань веб-доступности важливо, а в деяких випадках може бути юридичною чи договірною вимогою, — надати атрибут alt, що описує посилання, яке програма зчитування з екрана може прочитати, наприклад, для незрячих користувачів.

Елементи <area> можуть бути прямокутниками (shape="rect"), багатокутниками (shape="poly") або колами (shape="circle"). Також потрібно вказати координати X і Y (відлік з лівого верхнього кута зображення) за допомогою атрибута coords. Координати розділяються комою.

• Прямокутник потребує чотири координати: "x1,y1,x2,y2",
• Багатокутник — будь-яку кількість координат, кратну двом: "x1,y1,x2,y2, [...] xn,yn",
• Коло — одну пару координат і радіус: "x1,y1,radius".

Наступний приклад визначає прямокутну область ("9,372,66,397"). Коли користувач натискає будь-де в цій області, він потрапляє на домашню сторінку української Вікіпедії.

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://uk.wikipedia.org/" alt="Вікіпедія" title="Вікіпедія" />
</map>

Wiki

У програмі MediaWiki є розширення «Extension:ImageMap», за допомогою якого відображаються карти зображень, а також інструмент, за допомогою якого можна створювати карти зображень. Його синтаксис схожий на HTML, але простіший.

<imagemap>File:Назва_файлу.jpg|Карта зображення ...|350px|thumb
rect 286 87 376 191 [[Посилання 1|Відображення посилання 1]]
circle 100 141 20 [[Посилання 2|Відображення посилання 2]]
poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 [[Посилання 3|Відображення посилання 3]]
...
</imagemap>

CSS

Більш сучасним підходом є накладання посилань на зображення за допомогою абсолютного позиціонування CSS; однак це підтримує лише прямокутні клікабельні области. Ця техніка може бути придатною для правильної роботи карти зображень на iPhone, який не може правильно масштабувати карти зображень у чистому HTML.

Атрибути для елементів <map> і <area>

Для елементів <map> та <area> доступні всі глобальні атрибути, а також зазначені нижче.

Атрибут елемента <map>

• name - ім’я карти зображення для посилання з атрибута usemap, унікальне в межах документа.

У XHTML атрибут name вважається застарілим, і замість нього пропонується використовувати атрибут id.

Атрибути елемента <area>

• alt — альтернативний текст для випадку, коли зображення недоступні.
• href — адреса гіперпосилання для області.
• target — контекст перегляду для навігації за гіперпосиланнями.
• rel — зв'язок між документом, що містить гіперпосилання, і цільовим ресурсом.
• media — медіа-запит.
• hreflang — мова пов’язаного ресурсу.
• type — підказка щодо типу ресурсу за посиланням.
• shape — тип фігури, яку потрібно створити на карті зображення.
• coords — координати фігури, яка буде створена на карті зображення.

Створення та використання

Можна створювати карти зображень на стороні клієнта вручну за допомогою текстового редактора, але для цього веб-дизайнери повинні знати HTML і як перераховувати координати областей, які вони хочуть розмістити над зображенням. В результаті більшість карт зображень, прописаних вручну, є простими багатокутниками. Оскільки створення карт зображень у текстовому редакторі вимагає багато часу та зусиль, була розроблена безліч програм, щоб дозволити веб-дизайнерам створювати карти зображень швидко й легко, так само, як вони створюють фігури в векторному графічному редакторі. Прикладами таких програм є Adobe Dreamweaver або KImageMapEditor (для KDE), а також плагін imagemap у GIMP. Карти зображень з невидимими клікабельними областями створюють складнощі для користувача. Це можна частково виправити за допомогою ефектів перекидання.^[3]

SVG зображення

Оскільки формат зображення масштабованої векторної графіки (SVG) надає власні механізми для додавання гіперпосилань^[4], більш складних форм інтерактивності^[5] до зображень, традиційні прийоми карт зображень, як правило, не потрібні при роботі з векторними зображеннями у форматі SVG.