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

Влад Мержевич

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

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

Клієнтський варіант картографічного зображення

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

Для створення посилань на закладки, показані на рис. 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 цього тега повинно відповідати імені в 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).

href

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

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

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

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

2. З одним файлом зручніше працювати — не потрібно турбуватися про зчленування окремих фрагментів, і малюнок легко можна розмістити в потрібному місці.

Недоліки

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

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

3. З картами-зображеннями неможливо створити різні ефекти, які доступні при розрізанні одного малюнка на фрагменти: ефект перекочування, часткова анімація, індивідуальна оптимізація зображень для їх швидкого завантаження.

Юзабіліті

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

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

Альтернативні варіанти

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

Використання Flash

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

Розрізання зображень

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

Часті запитання