Існує можливість створення графічної карти посилань для Web-сайту (групи Web-сторінок).

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

Це дуже зручний прийом оформлення групи посилань.

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

Використовуйте пояснювальні тексти, для того, щоб користувач зрозумів, що це карта посилань, а не просто красива картинка.

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

Графічна карта створюється за допомогою декількох тегів.

Першим є тег <map> з атрибутом name для вказівки імені карти. Ім'я карти вибирається як ім'я змінної. У контейнері зовнішніх тегів <map> і </ map> містяться теги <area> (область) для завдання областей посилань.
Тег <area> має атрибути, що визначають посилання, форму і положення області посилання.

• href - рядок, що визначає адресу посилання
• shape - визначає форму області; можливі значення
  • rect - прямокутник
  • polygone - мноугольнік
  • circle - коло
• coords - координати області, які задаються у вигляді переліку чисел, розділених комами. Весь перелік полягає в лапки (для прямокутника задаються чотири числа - координати верхнього лівого і правого нижнього кута; для мноугольніка - задаються координати кожного кута; для кола задаються три числа - координати цента і радіус).

Після закриває тега слід вказати тег, вставляють графічне зображення і реалізує прив'язку карти до нього - тег <img>, докладно описаний в документі "Додавання зображень"

Крім атрибутів, описаних раніше в цьому випадку в тезі <img> додається атрибут зв'язку з картою:

usemap = "ім'я_карти"

Як ім'я карти вказується аргумент атрибута name тега </ map>

Розглянемо приклад:

Перед вами усічений варіант карти посилань цього сайту. Спробуйте підвести курсор миші до прямокутної або круглої області і ви побачите "спливаюче" назва сторінки. Клацнувши мишкою по будь-якому з обраних об'єктів ви можете перейти на цікаву для вас сторінку. У HTML-код це записано так:

Тут атрибут src тега img визначає графічний елемент "map.jpg".
Атрибут usemap посилається на елемент карти як на Web-адреса, отже вказується символ #. Як уособлення кордону border вказано "0".

У тезі map вказується які області графічного елементу (карти) "працюють" як гіперпосилання. Атрибут name відповідає атрибуту usemap тега img і "працює" як атрибут name в тезі якоря <a>.

Бажано, щоб всі елементи карти перебували в тому ж файлі, що і графічний елемент, який визначається в тезі img.

Теги area використовується для визначення областей на карті графічних посилань, які будуть пов'язані з Web-адресою. Атрибути shape визначають типи областей, в даному випадку "rect" і "circle". У цьому ж тезі area визначаються координати об'єктів (різні для кожного типу об'єкта) за допомогою атрибута coords.

Якщо дві або більше областей на карті перекривають один одного, то перевага має та область, опис якої з'явилося в HTML-документі раніше (тобто користувачеві буде надана можливість використовувати опис і посилання першої з'явилася в документі області.

У деяких випадках зручно створювати накладається, роблячи одну з них неактивній використовуючи атрибут nohref, наприклад:

У цьому випадку перша окружність створює неактивну область, що знаходиться в межах великого кола - створеної другим тегом area. Щоб отримати очікуваний ефект, необхідно, щоб неактивна область була описана першою (інакше вона буде прихована на активну форму).

Подивимось що вийде?

джерело