Térképek definiálása

A térkép szón itt az angol image map megfelelőjét kell érteni. Ez nem más, mint egy képre fektetett térkép, amely a kép különböző régióit, területeit definiálja. Használata lehetővé teszi, hogy egy kép több hivatkozást tartalmazzon, mivel a régiók mindegyike önálló hivatkozásként fog viselkedni: valamelyik definiált régióra rábökve az egérrel, a hozzá tartozó hivatkozás aktiválódik (betöltődik a vele megadott erőforrás).

A térkép kétféleképpen definiálható:

1. Kliens-oldali: Amikor a felhasználó aktivál egy kliens-oldali térképet az egérrel történő rábökéssel, a koordinátákat a böngésző dolgozza fel. Ez azt jelenti, hogy a böngésző határozza meg, hogy melyik területet aktiválta a kattintás, és a megfelelő régióhoz tartozó akciót végzi el.
2. Szerver-oldali: Amikor a felhasználó aktivál egy szerver-oldali térképet az egérrel, a kép koordinátáit a böngésző elküldi a szervernek, amely a képhez tartozó hivatkozás A elemének href paraméterében van megadva. A szerveren futó program feldolgozza a kapott koordinátát, és elvégzi a szükséges teendőket.

A szerver-oldali térképeket csak a grafikus böngészőprogramok képesek használni, és a feldolgozásukhoz a szerveren megfelelő programok kellenek. E két ok miatt célszerűbb a kliens-oldali térképet alkalmazni. Éppen emiatt, e tankönyvben csupán a kliens-oldali térképekkel foglalkozunk.

A kliens-oldali térképek definiálásához két elemre van szükség: A MAP elemre, amely létrehoz egy térképdefiníciót, és ennek tartalmaként a régiókat egymás után leíró AREA elemekre. Ez utóbbi helyett az A elem is használható, de mindig csak az egyiket lehet használni.

Használatukat nézzük meg egy példán keresztül: készítsünk egy szoba alaprajzához ismertetőt. Ehhez először is szükség van egy ábrára, amely a szoba alaprajzát tartalmazza. Ennek egyes részei lesznek a régiók, amelyekre kattintva a dokumentum belső ablakában az adott elem leírása fog megjelenni.

Ehhez két HTML állományra lesz még szükségünk az alaprajzot tartalmazó állományon kívül, valamint egy programra, amellyel a kép bármely pontjának a koordinátáit leolvashatjuk. Ilyen program lehet Linux alatt a Gimp, de más képszerkesztő program is képes lehet a kép koordinátáinak megadására.

A képet be kell szúrni a fő dokumentumba például egy IMG elem segítségével. A kép beszúrását végző elem usemap paraméterének meg kell majd adni egy azonosítót, amely a képhez tartozó térkép azonosítója. Mivel az azonosítóra itt hivatkozunk, így elé a # is szükséges:

Ezután következhet a térkép definiálása. Ehhez kell a MAP elem, amelynek name paraméterében kell megadni azt az azonosítót, amelyet ehhez a térképhez rendelünk – példánkban ez a felosztas:

Ezután pedig minden egyes definiálandó régióhoz egy AREA elemet kell beleírni a MAP elembe. A régióhoz meg kell adni az alakját, a koordinátáit és a hivatkozott címet, valamint a mi esetünkben a belső ablak nevét, hogy abba töltődjön be a kért oldal. Ha a href paraméter helyett a nohref paraméter szerepel, az azt jelenti, hogy az adott régió nem határoz meg semmilyen hivatkozást, rákattintva semmi sem fog történni.

A régió alakja és a koordináták, amiket meg kell adni, összefüggenek:

• shape="default" megadása esetén a régió az egész kép lesz. Ezt célszerű utoljára megadni, és így azokat a területeket definiálni, amelyre a többi régió nem fog vonatkozni. Azért kell utoljára megadni, mert a régiók átfedése esetén az előbb definiált régió lesz érvényes.
• shape="rect" esetén egy vízszintes és függőleges oldalakkal rendelkező téglalapot lehet megadni a két szemközti csúcsának koordinátáival.
• shape="circle" esetén egy kör alakú régió adható meg, amelynek középpontja a coords paraméter első két eleme által meghatározott koordinátájú pont lesz, sugara pedig a harmadik megadott érték. Ez utóbbi lehet százalék is, amely esetben a kép szélessége illetve magassága százalékában számított értékek közül a kisebbik lesz a sugár.
• shape="poly" esetén sokszög alakú régió adható meg, amely esetben a coords paraméter értékeként a sokszög csúcsainak koordinátáit kell sorban felsorolni, lehetőleg a végén megismételve a legelső csúcs koordinátáit, a sokszög záródása érdekében.

A koordináták minden esetben a kép bal felső sarkához relatív értékek. Megadásuk vesszővel elválasztott listában történik.

Ezután a belső ablak számára el kell készíteni azt az állományt, amely a leírásokat tartalmazza, mindegyik leírás elé egy célpontot helyezve a hivatkozások számára. A következőkben az elkészült HTML állományok láthatók, majd alatta maga az eredményül kapott dokumentum, egy belső ablakba illesztve: