53.Зображення – карта.

1. Спочатку малюнок упроваджується на веб - сторінку звичайним образом, з допомогою тега <IMG>:

<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310"

BORDER="0" ALT="ATARI-800">

2. Потім необхідно установити в цьому тегі атрибут USEMAP=.

Його значення повинне містити ім'я карти графічних посилань, з випереджувальним знаком #, Якщо карта ще не створена, як у нашому випадку, то їй можна дати будь-яке ім'я:

<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap">

3. Тепер потрібно створити власне карту посилань. Узагалі говорячи, ця карта може розташовуватися де завгодно, хоч в іншому файлі — тоді в атрибуті USEMAP= потрібно буде вказати, крім імені карти, ім'я цього файлу, наприклад: “mapfile.html#mymap”. У нашому випадку давайте розмістимо її наприкінці цього ж файлу.

4. Карта графічних посилань починається з тега <МАР> і завершується закриваючим тегом</МАР> . У теге <МАР> варто установити (обов'язково!) єдиний можливий атрибут NAME=. Його значенням повинне бути ім'я карти, на яке ми посилалися в теге <МАР> (за допомогою атрибута USEMAP=). У даному випадку це повиннео бути ім'я "compmap":

<МАР NAME="compmap">

5. Між тегами <МАР> і </МАР> повинна знаходитися основна частина карти. Вона складається з декількох тегов <AREA> , кожний з яких визначає активну область малюнка. (При щиглику миші на “активних областях” може відбуватися переміщення по гіперпосиланню, а інша частина зображення нічим не відрізняється від звичайного малюнка.) У даному випадку нам потрібно визначити три такі “активні області”: зображення монітора, комп'ютера і дисководу.

6. “Активні області” можуть бути або прямокутної форми, або круглої, або багатокутної. Це визначається установкою значення атрибута SHAPE= у теге <AREA> (він уживається без закриваючого тега). Якщо значення цього атрибута — "rect", область буде прямокутної, якщо "circle" — круглої, а якщо "poly" — багатокутної.

7. Далі починається саме неприємне в складанні карти графічних посилань: потрібно визначити координати кожної з активних областей і записати їхній як значення атрибута COORDS=. Якщо “активна область” прямокутна, то варто вказати координати лівого верхнього її кута і правого нижнього. Місце розташування будь-якої крапки на малюнку може бути визначене за допомогою двох чисел — її горизонтальної і вертикальної координат. Сама ліва верхня крапка на малюнку має координати “0,0”. Чим більше горизонтальна координата, тим правіше розташована крапка, і, відповідно, чим більше вертикальна координата, тим крапка нижче. Наприклад, якщо малюнок має розмір 400х300 крапок і нам потрібно визначити прямокутну активну область, що займає його лівий верхній кут і половину ширини, що має, і висоти малюнка, ми повинні будемо написати наступне:

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

У цьому записі атрибут COORDS= визначає прямокутник за допомогою двох крапок: одна з них має координати “0,0”, тобто лівий верхній кут, а інша — “ 200,150”, тобто це центральна крапка малюнка розміром 400х300.

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

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

Такий запис визначає круглу “активну область”, розташовану в центрі нашого гіпотетичного малюнка розміром 400х300 (координати центральної крапки— “200,150”). Окружність має радіус 40 крапок.

І, нарешті, самий складний і найбільше що часто зустрічається випадок — багатокутна “активна область”. Тут потрібно послідовно вказати координати всіх кутів багатокутника. Оскільки таких кутів може бути дуже багато, те і значення атрибута COORDS= здобуває загрозливі розміри.

Розглянемо простий приклад. Якщо на нашому малюнку розміром 400х300 ми хочемо визначити область у формі рівнобедреного трикутника, підстава якого проходить рівно посередині малюнка, займаючи всю його ширину, а вершина знаходиться посередині верхньої границі малюнка, то це можна зробити так:

<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-документ. На щастя, в останніх версіях деяких HTML-редакторів (наприклад, Allaire Homesite) маються убудовані засоби для установки координат на картах графічних посилань.

8. Однак атрибути SHAPE= і COORDS= — це ще не усі. У теге <AREA> необхідно установити ще саме головне — атрибут HREF=, що визначає гіперпосилання, тобто куди ж повинний потрапити користувач при щиглику мишею на цій “активній області”. Тут ніяких складностей немає — атрибут HREF= тега <AREA> поводиться так само, як якби він був у звичайному тегі <А> .

9. Крім того, буває корисно визначити також атрибут ALT=. Його значення може містити текст, що пояснює, що буде “спливати” при наведенні миші на “активну область”.