Kliensoldali térkép létrehozása

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!

A GIMP alkalmazással a képtérkép készítésének folyamata egyszerűsíthető, ahogy ezt az alábbi animációban is szemléltetjük.

Vissza a tartalomjegyzékhez