March 19, 2024

HTML gyorstalpaló 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 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 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.com/”
shape=
“rect”
coords=
“150, 0, 300, 150”
alt=
“WebGóbé honlap”>
<area href=
http://www.webgobe.com/konyv/”
shape=
“rect”
coords=
“0, 0, 140, 70”
alt=
“Hálózatok könyv”>
<area href=
http://www.webgobe.com/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 ugyanbban 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.