Gyakran találkozhatunk a weben olyan megoldással, hogy egy kép részei linkként viselkednek. Hogyan készíthetünk ilyet? A megoldást a kliensoldali térképek jelentik.
Mint ahogy azt a következőképen is láthatjuk, az egyes ábrák 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 hivatkozásként.
A képtérkép létrehozásához meg kell ismerkednünk a <map> taggel, illetve használnunk kell az <img> tag usemap paraméterét is, amellyel az adott térképet tudjuk a képhez rendelni.
<map> – térkép létrehozása
Mire használjuk?
A képhez tartozó képtérkép elhelyezésére szolgál.
Paraméterei:
globális attribútumok
name: ezen attribútum segítségével adhatunk egyedi nevet a képtérképünknek. pl. <map name="terkep1">. Később erre a névre kell hivatkoznunk annál a képnél, ahol a térképet fel akarjuk használni. Erre szolgál a usemap paraméter. Pl. <img src="kep.png" usemap="#terkep1">
Magát a térképdefiníciót az <area> tag segítségével kell megadnunk. Ennek a tagnek nincs zárópárja.
<area> – interaktív terület megadása
Mire használjuk?
Ezen tag segítségével tudjuk meghatározni a különböző alakú területeket a képen, amelyek linkként viselkednek.
Paraméterei:
globális attribútumok
alt: ugyanaz a szerepe, mint a kép esetén, csak most nem a teljes kép, hanem annak egy területnek az alternatív szövegét kell ide írnunk.
shape: Itt adhatjuk meg, hogy milyen alakú területet szeretnénk létrehozni. Ez téglalap, kör és sokszög lehet.
default: ezen érték megadása esetén a teljes kép lesz a terület. Ilyenkor a coords paramétert nem kell megadni.
rect: téglalap alakú területet hozhatunk létre.
circle: kör alakú területet definiálhatunk.
poly: sokszöggel leírható területet hozhatunk létre.
coords: A terület meghatározó pontjainak koordinátáját állíthatjuk be.
Tudnunk kell, hogy a koordinátarendszer origója, vagyis a (0,0) pontja a kép bal felső sarka lesz. Az x koordináta jobbra nő, az y koordináta pedig lefele, vagyis itt csak 0 és pozitív koordináták adhatók meg.
Az értékeket egy listában adhatjuk meg, ahol a listaelemeket vessző választja el. Ezeket a pontokat (szinte) tetszőleges képszerkesztő programban le lehet lesni. Természetesen a különböző alakok esetében más-más jellemzőket adhatunk meg ebben a listában.
rect esetén: a téglalap bal felső, illetve jobb alsó koordinátái vesszővel elválasztva pl. shape="rect" coords="15,30,150,300"
circle esetén: középpont koordinátái, és a sugár vesszővel elválasztva pl. shape ="circle" coords ="50,50,25"
poly esetén: A határoló pontok koordinátái vesszővel elválasztva pl. shape ="poly" coords ="50,70,150,240,370,120"
href, target, download, rel, hreflang, type: ezen paraméterek szerepe ugyanaz, mint a link megadására szolgáló <a> tag esetén, ezért ezek újbóli magyarázatára itt nem térünk ki.
Most lássuk újból a példánkat interaktív példaként, hogy a forráskódot is megvizsgálhassuk!
Példa
Magyarázat
Ebben a példában a képtérképnek a "logok" nevet adtuk. Az első képrészlet az ELTE címerét ábrázolja, ami egy kör alakú terület. Ennek megfelelően adtunk meg alaknak a kört (shape="circle"). Képszerkesztő programban lelestük a címer középpontját (90,100) koordináta, a kör sugara 72 lett, ezért a coords paraméter értéke "90,100,72".
A HTML5 szabvány logója egy sokszöggel keríthető körbe, ezért alaknak (shape) a poly értéket adtuk meg, és felsoroltuk a képet határoló pontok koordinátáit.
A W3C logója téglalapba foglalható, ezért a shape="rect" paramétert adtuk meg, és a coords paraméterbe került a téglalap bal felső és jobb alsó koordinátája.
A képnél a usemap paraméterrel hivatkozunk a képtérkép nevére úgy, hogy egy # karakter mögé írjuk a képtérkép nevét.
