Kliens oldali térképek

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:

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.