Сенсорні зображення

Сенсорне зображення — це малюнок, поділений на окремі ділянки (“гарячі” області), кожна з яких є гіперпосиланням на окремий документ або пов¢ язана з якою-небудь процедурою. Наприклад, розмістивши курсор у різні точки зображення, ми можемо побачити різні надписи. В якості графічного формату для карткового зображення вибирається формат GIF. Області малюнка, чуттєві до натиснення “миші”, описуються у тезі < MAP> …< /MAP>, що має вигляд:

< MAP NAME=" ім¢ я карти" >...< /MAP>

Атрибут NAME визначає ім¢ я навігаційної карти (унікальне для даного документа) і використовується для виклику карти за допомогою параметра USEMAP елемента IMG. Значення цих атрибутів повинні співпадати. Тег < MAP> для зручності розміщують на початку документа після тега < BODY>. Блок тега < MAP> має такий вигляд:

<! —Створюємо карту Map1: -->
< MAP NAME=" Map1" >
<! —Задаємо області -->
< AREA HREF="...>
< AREA HREF="...>
...
< /MAP>
<! —Карта готова -->

За допомогою тега < AREA> описуються чуттєві області зображення. Для цього використовується параметр SHAPE, що визначає форму активної області для карти і може приймати значення:

§ RECT — прямокутник;

§ CIRCLE — коло;

§ POLY – многокутник;

§ DEFAULT — область за замовчуванням (вся повністю).

Усі області, крім DEFAULT, потребують указання координат в атрибуті COORDS. Список координат залежить від вибраної форми, вони визначаються у пікселях і записуються через кому. Верхній лівий кут має координати (0, 0).

Для прямокутника вказуються координати лівого верхнього і правого нижнього кутів, наприклад:

< area shape=" rect" coords=" 0, 0, 200, 100" >

Для круга вказуються координати центра і радіус у пікселях, наприклад:

< area shape=" rect" coords=" 0, 0, 200, 100" >

Для многокутника перелічуються пари X- та Y- координат вершин. Для надійності многокутник повинен бути замкненим, тобто перша пара вершин має співпадати з останньою.

В опції HREF=¢ ¢ URL¢ ¢ зазвичай вказується URL-адреса документа, що адресується даною областю. Якщо чуттєва область визначена, але не пов¢ язана ні з одним документом, то замість даної опції вказується значення NOHREF. Для зв¢ язування зображення із створеною картою достатньо у тезі < IMG>, за допомогою якого вставляється зображення, вказати опцію USEMAP=¢ ¢ #ім¢ я карти¢ ¢, наприклад:

< img src=" 1.jpg" width=" 526" height=" 400" border=" 1" usemap=" #a1" >

Приклад 1:

<! —Створюємо карту -->

< MAP NAME=" map1" >

< AREA HREF=" index.html" ALT=" Водопад" SHAPE=" rect" COORDS=" 0, 0, 300, 260" >

< /MAP>

<! —Застосовуємо її до малюнку -->

< IMG src=" vodopad.jpeg" WIDTH=" 300" HEIGHT=" 260" BORDER=" 2" ALT=" Водопад" USEMAP=" #map1" >

Приклад 2:

<! —Створюємо карту із спливаючими заголовками-->

< map name=" map2" >

< area shape=" rect" coords=" 0, 0, 300, 50" href=" #" title=" Блакитне небо " >

< area shape=" POLY" coords=" 120, 180, 210, 180, 150, 150" href=" #" title=" Човен " >

< area shape=" POLY" coords=" 0, 20, 50, 20, 30, 140, 0, 120, 0, 20" href=" #" title=" Скеля " >

< area shape=" CIRCLE" coords=" 50, 235, 25" href=" #" title=" Камінь " >

< /map>

<! —Застосовуємо її до малюнку -->

< IMG src=" vodopad.jpeg" width=300 height=260 border=1 usemap=" #map2" >