Alapfokú html tanfolyam 22. rész

Térképek

Ebben a részben térképekről, azaz azokról a képekről lesz szó, melyek különböző részeire kattintva különböző oldalakra ugorhatunk. Mi csak a  kliens oldali térképekről fogunk szót ejteni, azaz azokról, melyekhez megfelelő böngésző használata szükséges, de nem érzékeny arra, hogy melyik szolgáltató szerverén helyezzük el.

<IMG SRC="kep.jpg" USEMAP="terkepek.htm#terkep1">

A fenti parancsban a kep.jpg nevű képre fogunk kattintani, de a térképutasítások a terkep.htm fajlban a terkep1 nevű térkép-utasításban helyezkednek el, mely az alábbi alakot ölti:

<MAP NAME="terkep1"> <AREA [SHAPE="alak1"] COORDS="x,y,..." [HREF="hivatkozás1"] > <AREA [SHAPE="alak2"] COORDS="x,y,..." [HREF="hivatkozás2"] > <AREA [SHAPE="alak3"] COORDS="x,y,..." [HREF="hivatkozás3"] > </MAP>

A téképutasítás neve "terkep1". Az AREA parancsok a területeket jelölik ki kattintásra. A SHAPE paraméter a terület alakját határozza meg. A SHAPE a következő lehet

SHAPE ="RECT", "CIRCLE" és "POLY".

A Rect a téglalap rövidítése, ehhez négy koordináta kell, nevezetesen: COORDS="bal-x,felső-y,jobb-x,alsó-y".
A Circle a kör angol neve, ehhez három adat szükséges: COORDS="középpont-x, középpont-y, sugár".
A Poly  a poligont jelöli, ehhez annyi pár adat kell, ahány csúcsa a poligonnak van: COORDS="x1,y1,x2,y2,x3,y3... ".
A koordinátákat pixelben kell megadni.

A HREF után a megfelelő linket kell elhelyezni.

Ha egy helyen nem akarjuk, hogy a kattintásra új oldal jöjjön be, akkor a <AREA shape="..." nohref> parancsot írjuk be.

Alábbi példánkban  Webrádió logóját láhatjuk, ahol a megfelelő részre kattintva a megfelelő rovathoz jutunk.

<map name="FPMap0"> <area href="http://www.webradio.hu/szeged/" shape="rect" coords="133, 43, 262, 59" alt="Webrádió Szeged"> <area href="http://www.webradio.hu" shape="rect" coords="0, 0, 261, 39" alt="Webrádió"> <area href="http://www.webradio.hu" shape="rect" coords="1, 37, 128, 57" alt="Webrádió"> </map> <img border="0" src="http://www.webradio.hu/kepek/webradio_szeged.gif" usemap="#FPMap0" width="263" height="60">

 

Látható, hogy a térképparancs ugyabban a fájlban található, melyben a kép utasítás is volt. Téglalap alakú kattintható mezőket határoztunk meg. Az utolsó AREA sor arról gondoskodik, hogy ha semleges területre kattintunk, akkor ne nyíljon meg új oldal. A TARGET parancsot is használhatjuk, ahogy azt már korábban megszoktuk.