Формування карти гіперпосилань

Графічну карту посилань створюють за допомогою кількох тегів. У тегу <IMG> визначають атрибут SRC, щоб задати зображення, і атрибут USEMAP, значенням якого є ім'я карти (має починатися символом #). Власне карту створюють за допомогою тегу <МАР> з атрибутом NAME, який містить ім'я карти (визначене в атрибуті USEMAP, але без символу #) та тегу </МАР>. Між ними записують теги <AREA>, які задають параметри гарячих областей. При цьому використовують такі атрибути:

• HREF — визначає гіперпосилання, пов'язане з областю;

• SHAPE — визначає форму області, його значеннями можуть

бути:

• rect — прямокутник;

• polygone або poly — багатокутник;

• circle — коло;

• COORDS — містить координати області у вигляді взятого в лапки списку чисел, розділених комою. Для прямокутника задають

чотири числа — координати верхнього лівого і правого нижнього кутів, для багатокутника — послідовні координати кожного кута, для кола — координати центра і радіус.

Приклад визначення карти посилань наведено нижче.

<IMG SRC="map.bmp" USEMAP="#karta">

<МАР NAME="karta">

<AREA HREF="l.html" SHAPE="rect" COORDS="70,250,160,270">

<AREA HREF="2.html" SHAPE="circle" COORDS="260,140,60">

</MAP>

Слід попрацювати над малюнком карти у графічному редакторі, щоб окреслити необхідні області, які пізніше стануть гіперпоси- ланнями, та визначити координати, що будуть записані як значення атрибута COORDS.

Місце розташування будь-якої точки на малюнку визначають два числа — її горизонтальна та вертикальна координати. Верхня ліва точка має координати (0;0). Більшим горизонтальним координатам відповідають правіші точки, більшим вертикальним — нижчі.

Наприклад, якщо малюнок має розмір 400x300 пікселів, і необхідно визначити прямокутну область, що займає його верхню ліву частину та має вдвічі меншу ширину і висоту, запис тегу <AREA> буде таким:

<AREA SHAPE="rect" COORDS="0,0,200,150">

У цьому записі атрибут COORDS визначає прямокутник за допомогою двох точок: лівого верхнього кута з координатами (0;0) і правого нижнього з координатами (200; 150) (центральна точка малюнка, що має розмір 400x300).

Якщо гаряча область є колом, то слід зазначити координати лише однієї точки — центра кола, а також задати його радіус, наприклад:

<AREA SHAPE="circle" COORDS="200,150,40">

Такий запис визначає круглу гарячу область, розміщену в центрі малюнка розміром 400x300. Координати центральної точки (200;150), радіус кола — 40 пікселів.

Найскладніший випадок — багатокутна гаряча область, для якої потрібно послідовно зазначати координати всіх кутів. Припустимо, що на малюнку розміром 400x300 пікселів потрібно визначити гарячу область у формі рівнобедреного трикутника, основа якого проходить точно посередині малюнка, займаючи всю його ширину, а вершина міститься посередині верхньої межі. Цю область визначають так:

<AREA SHAPE="poly" COORDS="0,150,400,150,200,0">

ШІСТЬ координат задають три точки — кути трикутника. У цьому випадку їх послідовність неважлива, і ви могли б написати, наприклад, 400;150;0;150;200;0, проте коли кількість кутів є більшою, важливим є порядок з'єднання точок. Наприклад, записи

<AREA SHAPE="poly" COORDS="0,0,200,0,200,150,100,75,0,150">

<AREA SHAPE="poly" COORDS="0,0,200,0,100,75,200,150,0,150">

дадуть різні результати. У першому випадку це прямокутник із вирізаним трикутником знизу, а в другому — з вирізаним трикутником праворуч.

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

Дата добавления: 2014-01-11