Kliens oldali térképek készítése

Gyakran találkozhatunk a weben olyan megoldással, hogy egy bizonyos kép részei linkként viselkednek. Mint ahogy azt itt is láthatjuk, az egyes televíziók logói linkként viselkednek. A kívánt hatást nem úgy értük el, hogy 3 képet egymás mellé tettünk, és külön-külön linket definiáltunk rá, hanem egy összefüggő kép bizonyos területeit jelöltük meg.
A kliens oldali térképek (Image Map) létrehozása a különböző szerkesztőprogramokkal elég egyszerű (lásd Frontpage HTML szerkesztő program leírása). Most nézzük meg, hogy a szerkesztőprogramok nélkül, pusztán HTML kódokkal hogyan hozhatunk létre ilyen térképeket:
A Bevezető tag: <MAP> Paraméter: NAME= a térkép neve (ezzel a névvel fogunk a térképre hivatkozni az IMG paraméteren belül) Magát a térképdefiníciót az AREA tagek között kell megadnunk. Paraméterei:
SHAPE= alak | A lehetséges alakok: rect: téglalap alakú terület circle: köralakú terület poly: sokszöggel leírható terület
COORDS= koordináták | A terület méretét (határoló pontjainak koordinátáját) állíthatjuk be. A kordinátarendszer (0,0) pontja a kép bal felső sarka lesz. Az értékeket egy listával adhatjuk meg, ahol a listaelemeket vessző választja el. Természetesen a különböző alakok esetében más más jellemzőket adunk meg ebben a listában. RECT: a téglalap bal felső, illetve jobb alsó koordinátái pl. SHAPE=RECT COORDS="15,30,150,300" CIRCLE: középpont koordinátái, és a sugár pl. SHAPE=CIRCLE COORDS="50,50,25" POLY: A határoló pontok koordinátái pl. SHAPE=POLY COORDS="50,70,150,240,370,120"
HREF= URL | Az adott területhez rendelt link URL-je.
NOHREF | Ha a területhez nem tartozik hivatkozás, akkor ezzel a taggel jelölhetjük
### Nézzük, hogy az alábbi ábrához hogyan lehet kliens oldali képet szerkeszteni.
A képet egy tetszőleges grafikai program segítségével elkészíthetjük. Megkönnyíti a helyzetünket, ha a program képes arra, hogy az egér aktuális koordinátájának pozícióját le lehet kérdezni.(segítségképpen bejelöltem a képen, hogy melyik pontnak mi a koordinátája. A koordinátarendszer 0,0 pontja a kép bal felső sarka. Az x koordináta balról jobbra, az y koordináta fentről lefele növekszik.)
### A hozzátartozó kód:
<IMG src="ures.jpg" border="0" width="300" height="200" usemap="#terkep"> <MAP NAME="terkep"> <AREA HREF="http://www.freemail.hu/" ALT="Freemail" SHAPE="RECT" COORDS="5,5,125,55"> <AREA HREF="http://www.origo.hu/" ALT="Origo" SHAPE="CIRCLE" COORDS="60,135,55"> <AREA HREF="http://www.szon.hu/" ALT="SZON" SHAPE="POLY" COORDS="270,30,130,160, 250, 160"> </MAP> |  |
### A magyarázat: <IMG src="ures.lpg" border="0" width="300" height="200" usemap="#terkep"> Beillesztjük a képet, ami 300 képpont széles és 200 képpont magas. A usemap paraméterrel jelezzük, hogy a képhez tartozik egy kliens oldali térkép, amelynek az a neve, hogy terkep. A # jelet ne felejtsük el az elejére kitenni. <MAP NAME="terkep"> Itt adjuk meg a térkép definicióját. <AREA HREF="http://www.freemail.hu/" ALT="Freemaik" SHAPE="RECT" COORDS="5,5,125,55"> Az első terület amit megadunk egy téglalap lesz (SHAPE="RECT") Téglalap esetén a jellemző koordináta a bal felső, és a jobb alsó koordináta, ami jelen esetben a (5,5) és (125,55) koordináta. A href paraméterben meg kell adnunk a területhez tartozó URL-t. <AREA HREF="http://www.origo.hu/" ALT="Origo" SHAPE="CIRCLE" COORDS="60,135,55"> A második terület a kör lesz. (SHAPE="CIRCLE") A kör jellemző koordinátái a kör középpontja (60,135) és a sugara (55). <AREA HREF="http://www.szon.hu/" ALT="SZON" SHAPE="POLY" COORDS="270,30,130,160, 250, 160"> A harmadik területet egy sokszögvonal segítségével tudjuk megadni. (SHAPE="POLY") Az egyes pontok koordinátáit írjuk egymás után. (270,30,130,160, 250, 160) A kezdőponot nem kell mégegyszer megadnunk. </MAP> Lezárjuk a térkép definiciós részét.