За създаване на карти на изображения се използват няколко тага.
Първият таг <MAP....>.....</MAP> служи за контейнер на всички дефиниции на чувствителни области, които се задават с неконтейнерния таг <AREA......>.
Вторият основен таг е тагът за изображения <IMG...>, чрез който се задава изображението, за което са определени чувствителните области с тага <MAP...>.
Връзката между двата тага се осъществява чрез атрибута NAME= в тага <MAP.....> и атрибута USEMAP="#..." в тага <IMG....>.
Стойностите на атрибутите NAME= и USEMAP="#..." трябва да съвпадат абсолютно точно, като пред стойността на атрибута USEMAP се поставя символа " # ". Изискванията са същите както при вътрешнодокументните връзки (параграф 10.2)
Тагът <MAP....>.....</MAP> трябва да предхожда тага <IMG...>. Препоръчва се той да бъде в началото на тялото на страницата, т.е. след тага <BODY...>.
Общият вид на част от
изходния код на Web страница с карта на изображения изглежда по следния начин:
............................
<MAP NAME=......>
<AREA...................>
<AREA...................>
<AREA...................>
..............................
</MAP>
................................
.................................
<IMG SRC=.... USEMAP=#........>
....................................................
Тагът <MAP....> има само един атрибут NAME=, с който се задава името на картата, чрез което се установява връзка с тага <IMG...>.
Чрез таговете <AREA...> се задават чувствителните области в изображението и съответните хипервръзки, свързани с тях.
Атрибутите на тага <AREA...>, техните стойности и резултати от използване са посочени в табл.13.1
| Атрибути | Стойности |
Резултат
от използване |
| SHAPE= | default | Задаване
на цялата област на картата на изображението, в която се включва и областта
извън чувствителните области. |
| rect | Правоъгълна
чувствителна област. Задава се чрез координати (x,y) на горния ляв и долния
десен ъгъл на правоъгълника в атрибута COORDS=. |
|
| circle | Чувствителна
област във вид на окръжност. Задават се координатите на центъра на окръжността
и стойността на радиуса в атрибута COORDS=. |
|
| poly | Чувствителна
област във вид на многоъгълник. Задава се чрез координатите на ъглите
на многоъгълника в атрибута COORDS=. |
|
| COORDS= | Числа,определящи координатите, в пиксели | Всички
стойности на отделните координати се отделят със запетая.Задаваните стойности
зависят от стойността на атрибута SHAPE=. |
| HREF= | URI адрес | Адрес
на файла,с който се задава хипервръзка при щракане на мишката в чуствителна
област. |
| NOHREF | Без стойност | Задава
отсъствие на хипервръзка в областта. |
| ALT= | Текст | Алтернативен
текст на хипервръзката. |
| TARGET= | Име на фрейм | Име
на фрейм или Inline фрейм за зареждане на файла, зададен с атрибута HREF=
. |
Чрез стойността default на атрибута SHAPE=може да се зададе извеждане на информация за това какво да се предприеме, ако не е натиснат бутона на мишката върху нито една от чувствителните области.
При задаване вида на чувствителната област в атрибута SHAPE=, координатите се отчитат от горния ляв ъгъл на прозореца на браузера, който е с координати: x=0, y=0.
Стойностите на атрибута COORDS= зависят от вида на чувствителната област.
При правоъгълник това ще бъдат четири числа, разделени със запетая. Например: с COORDS=0,0,50,80. се задава правоъгълна чувствителна област с координати на горния ляв ъгъл x=0 , y=0 и на долния десен ъгъл x=50, y=80 пиксела.
При задаване на окръжност със следните стойности на COORDS=120,150,50 се задават координати на центъра на окръжността са x=120 и y=150, а дължината на радиуса е 50 пиксела.
При зададен многоъгълник, координатите могат да бъдат,например, COORDS=100,5,180,155,50,160. С тези три двойки координати е зададена триъгълна чувствителна област със стойност на точката на първия връх x=100, y=5; на втория връх - x=180 y=155; на третия връх x=50, y=160 пиксела.
Стойностите на атрибута HREF= се задават по същия начин, както е описано в параграф 10.3.
Атрибутът TARGET= се използва така, както е обяснено в параграф 12.3.
Атрибутите на тага <IMG...>, използвани в картите на изображения, са същите както и в обикновен таг за изображения (параграф 9.3), плюс задължителния само в този случай атрибут USEMAP=.
От излиженото до тук се вижда, че не е трудно да се създаде карта на изображение. Практически най-трудно е определянето и задаването координатите на чувствителните области.
Използването на таговете за създаване на карти на изображение (чувствителни карти) се илюстрира със следния пример.
Да създадем карта на изображение за осъществяване на връзка към, услвоно наречени, първа, втора, трета и четвърта Web страници.
Първо трябвя да се изработи или избере готово графично изображение, снимка или друг графичен обект.
В случая ще използваме правоъгълна лента разделена на четири области:
Името на файла на горното изображение е karta.gif
Изображението, което ще се използва за създаване на чувствителна
карта е зададено със следния таг:
<IMG src="karta.gif" width="303"
height="27" usemap="#Map" border="0">
Чувствителните области (правоъгълници около думите) в изобрзжението
са зададени със следните тагове:
<MAP name="Map">
<AREA shape="rect" coords="7,4,63,21" href="purva.htm"
>
<AREA shape="rect" coords="75,6,130,21" href="vtora.htm"
>
<AREA shape="rect" coords="150,4,210,21" href="treta.htm"
>
<AREA shape="rect" coords="226,7,300,21" href="chetvurta.htm"
>
</MAP>
В резултат на горните действия е създадена следната чувствителна карта с връзки към четири Web страници:
Връзките към страниците от картата се зареждат в следния Inline фрейм:
Значително се улеснява работата по създаване на карти на изображения с използване на специално създадени за тази цел програми. Една от многобройните такива програми е MapThis.
Тази програма е безплатна и може да се изтегли от адрес: http://www.vircom.ca/Web_ed/mapthis/mapthis.html.
Карти на изображения се задават лесно с програми за създаване на HTML документи.(FrontPage, Deamweaver. 1stPage, ACEhtml и много други).
При използване на такива програми се очертава чувствителната област и се задава адреса на хипервръзката за нея. Програмата генерира необходимите тагове и стойностите на атрибутите, в това число и координатите.