Карти-зображення

Карти-зображення дозволяють прив’язувати посилання до різних областей одного зображення. Реалізується у двох різних варіантах – серверному та клієнтському. У разі застосування серверного варіанту браузер надсилає запит на сервер для отримання адреси вибраного посилання та чекає на відповідь з необхідною інформацією. Такий підхід потребує додаткового часу на очікування результату та окремі файли для кожної картки-зображення.

У клієнтському варіанті карта знаходиться в тому ж HTML-документі, що і посилання на зображення.

Клієнтський варіант картки-зображення
Для вказівки того, що зображення є картою, використовується атрибут usemap тегу <img>. У якості значення вказується посилання опис конфігурації карти.

Рис. 1. Закладки є посиланнями, створеними за допомогою картки

Щоб зробити посилання на вкладки, показані на рис. 1 слід використовувати наступний код (приклад 1).

Приклад 1. Використання карти-зображення

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Карта-зображення</title>
 </head>
 <body> 
  <p><img src="images/map.gif" width="411" height="46" usemap="#map" alt="Навігація"></p>
  <p><map name="map"> <area shape="poly" alt="Вкладка 2" 
    coords="210,27, 203,9, 202,6, 197,2, 192,1, 120,1, 115,2, 110,6, 112,9, 119,27, 119,32, 211,32, 210,27" 
    href="2.html">
    <area shape="poly" alt="Вкладка 3" 
    coords="302,27, 295,9, 293,6, 289,2, 283,1, 212,1, 206,2, 202,6, 203,9, 210,27, 211,32, 284,32, 303,32, 302,27" href="3.html">
    <area shape="poly" alt="Вкладка 4" 
    coords="302,27, 303,32, 394,32, 393,27, 386,9, 382,3, 375,1, 303,1, 298,2, 293,6, 295,9, 302,27" 
    href="4.html">
  </map></p>
 </body>
</html>

Для вказівки браузеру, що зображення є картою, застосовується атрибут usemap. Він є посиланням на опис конфігурації карти, яка задається тегом <map>. Значення атрибута name даного тегe має відповідати імені в usemap. Для завдання активної області, яка є посиланням на HTML-документ, використовується тег <area>.

Атрибути тегу AREA
shape
Визначає форму активної галузі. Форма може бути у вигляді кола (circle), прямокутника (rect), полігону (poly).

alt
Додає альтернативний текст для кожної області. Служить лише коментарем для заслання, оскільки на екран не виводиться.

coords
Вказує координати активної області. Координати відраховуються у пікселях від лівого верхнього кута зображення, якому відповідає значення 0,0. Перше число є координатою по горизонталі, друге по вертикалі. Список координат залежить від форми області.

Для кола задаються три числа – координати центру кола та радіус.

<area shape="circle" coords="230,340, 100" href="circle.html">

Для прямокутника – координати лівого верхнього та правого нижнього кута.

<area shape="rect" coords="24,18, 210,56" href="rect.html">

Для полігону задаються координати його вершин (рис. 2).

Рис. 2. Координатні точки для полігону

href
Визначає адресу посилання області. Правила запису такі самі, як і для тегу <a>.

Карти-зображення дозволяють створювати посилання на різні області одного зображення. Використання цього підходу наочніше, ніж звичайні текстові посилання і дозволяє застосовувати лише один графічний файл для організації посилань. Однак не слід вважати, що карти-зображення слід включати скрізь, де потрібні графічні посилання. Насамперед слід оцінити всі доводи за і проти, а також переглянути альтернативні варіанти.

Переваги карт-зображень

  1. Карти дозволяють задати будь-яку форму області посилання. Враховуючи, що зображення за своєю природою прямокутні, зробити графічне посилання складної форми, наприклад для вказівки географічного району, без карт-зображень неможливо. Як правило, в географічній тематиці карти-зображення і застосовуються найчастіше.
  2. З одним файлом зручніше працювати – не доводиться дбати про стикування окремих фрагментів і малюнок легко можна помістити в потрібне місце.

Недоліки

  1. Не можна встановити підказку та альтернативний текст для окремих областей. Альтернативний текст дозволяє отримати текстову інформацію про малюнок при відключеному у браузері завантаженні зображень. Оскільки завантаження зображень відбувається після отримання браузером інформації про нього, то текст, що заміщає малюнок, з’являється раніше. А вже в міру завантаження текст змінюватиметься зображенням. Для карт-зображень ця особливість є актуальною, адже якщо відключити перегляд зображень, що роблять багато користувачів, то побачимо лише один порожній прямокутник.
  2. За складної форми області посилання збільшується обсяг коду HTML. Контур апроксимується набором прямих відрізків, для кожної точки такого відрізка слід задати дві координати, а загальна кількість таких точок може бути досить великою. Заради справедливості, слід зазначити, що складні форми є окремим випадком і застосовуються досить рідко.
  3. З картами-зображеннями не можна зробити різні ефекти, які доступні при розрізанні одного малюнка на фрагменти: ефект перекочування, часткова анімація, індивідуальна оптимізація картинок для швидкого завантаження.

Юзабіліті
З позиції зручності користувачів карти-зображення мають тільки одну перевагу – посилання різноманітної форми. Це додає наочність у поданні інформації – ми не обмежені прямокутною формою посилання і можемо використовувати посилання складної конфігурації для своїх цілей. У всіх інших відносинах від них користі немає – звичайні текстові посилання більш інформативні і їм не страшно відключення показу картинок у браузері. Той факт, що одне зображення завантажується швидше, ніж та сама картинка, але порізана на фрагменти і збережена у вигляді набору графічних файлів легко обходиться. Кожен із таких кінцевих файлів можна зменшити, використовуючи індивідуальні оптимізації. У результаті загальний обсяг всіх фрагментів займатиме менше місця, ніж одне зображення. Не варто скидати з рахунків і психологічний фактор – людині здається, що набір маленьких картинок завантажується швидше, ніж одна велика.

Основний недолік карт – немає чітко виділених меж посилань. Тому ці межі доводиться виділяти різними засобами на зображенні. Якщо малюнок не завантажився з якихось причин, то розібратися в наборі посилань стає проблематичним.

Альтернативні варіанти
Не завжди є гостра необхідність використовувати карти-зображення, тому слід звернути увагу на те, що існують інші можливі варіанти виконання поставленого завдання.

Використання FLash
У flash-роликах можна створювати різні області посилань, використовуючи можливості векторної графіки. Завдяки широким можливостям, на Flash можна створювати чудові меню та засоби навігації. Але тут теж потрібна обережність, щоб не загубити дерева лісу.

Розрізання зображень
Це один із популярних засобів у дизайні. Одне зображення у разі розрізається з допомогою спеціальних програм на фрагменти, які остаточно зводяться разом, створюючи ілюзію цільної картинки. Хоча області розрізання можуть бути лише прямокутні, в більшості випадків цього цілком достатньо для створення посилань. Для кожного фрагмента можна вибрати найкращий графічний формат, в якому він буде збережений, параметри оптимізації, додати альтернативний текст. Тоді навіть при відключеному показі картинок, будуть добре видно межі областей і текст, що заміщає зображення.

Резюме
Як з’ясувалося, причина використовувати карти-зображення лише одна – складна форма посилань, продиктована завданнями дизайну. Типове застосування – регіони географічної карти, які є посиланнями. В інших випадках можна обійтися і текстовими посиланнями, а при необхідності створення графічної навігації, одне зображення для зручності можна розрізати на фрагменти. Такий підхід створить більше зручності користувачам, особливо тим, які через різні причини відключають показ зображень у браузері. Про них також треба пам’ятати.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

%d блогерам подобається це: