Alapfokú html tanfolyam 23. rész

Kliens oldali 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. Általában egy térképre való hivatkozás így néz ki:

<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 fájlban 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 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 a WebGóbé logóját láhatjuk, ahol a megfelelő részre kattintva a megfelelő rovathoz jutunk.

WebGóbé honlap Hálózatok könyv HTML gyorstalpaló
<map name="gobe">
<area href=
"http://www.webgobe.ro/" shape="rect" coords="150, 0, 300, 150" alt="WebGóbé honlap">
<area href=
"http://www.webgobe.ro/konyv/" shape="rect" coords="0, 0, 140, 70" alt="Hálózatok könyv">
<area href=
"http://www.webgobe.ro/konyv/html/" shape="rect" coords="0, 80, 140, 150" alt="HTML gyorstalpaló">
<area nohref
shape="rect" coords="0, 0, 300, 150" alt="">
</map>
<img border=
"0" src="hirig.gif" usemap="#gobe" width="300" height="150">

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.