Klikací mapy

Jiří Kosek ml.

V dnešním pokračování našeho seriálu se podíváme na to, jak vytvářet tzv. klikací mapy. Klikací mapa je obrázek, jehož jednotlivé části slouží jako odkazy na další stránky webu. Využívají se zejména pro různé navigační lišty apod. Stačí pak jen myší ukázat, kam chceme brouzdat dál, a kliknout.

Abychom mohli mapu vytvořit musíme mít nejprve k dispozici obrázek, který bude jako mapa použit. My si vše ukážeme na obrázku jednoduché lišty s tlačítky (viz. obrázek 1). Dejme tomu, že obrázek máme uložen v souboru navbar.gif.

Obr. 1: Obrázek, který se brzy stane klikací mapou

Nyní si musíme rozmyslet, které části obrázku budou aktivní -- budou sloužit jako odkazy, které lze aktivovat kliknutím myší. My se rozhodneme, že první tlačítko bude sloužit k vyvolání stránky Lampy.html a druhé k vyvolání stránky Tiskarny.html. Třetí tlačítko bude sloužit jako odkaz na stránku s nápovědou (v souboru Help.html). Poslední kruhové tlačítko bude sloužit k návratu na úvodní stránku (soubor Index.html). Tento popis je srozumitelný člověku, ale počítače naštěstí ještě nejsou tak inteligentní. To, kam která část obrázku ukazuje, musíme počítači sdělit po lopatě. Asi nejjednodušším způsobem je vymezení geometrických hranic jednotlivých tlačítek (viz obrázek 2).

Obr. 2: Hranice oblastí, které budou reagovat na kliknutí myší

První čtyři tlačítka jsou obdélníková, k jejich určení nám tedy stačí znát souřadnice protilehlých vrcholů. Poslední tlačítko je kruhové a proto jeho hranice můžeme omezit kružnicí. HTML nám umožňuje hrany aktivní části obrázku definovat jako obdélník, kružnici nebo polygon (mnohoúhelník). Souřadnice bodů, které určují tyto útvary můžeme zjistit pomocí většiny grafických editorů -- ty totiž obvykle zobrazují souřadnice kurzoru myši v obrázku. Stačí se tedy myší přesunout postupně na všechny body a zaznamenat si souřadnice.

Když známe všechny důležité souřadnice, můžeme přistoupit k definici vlastní klikací mapy. Definice aktivních oblastí se uvádí mezi tagy <MAP> a </MAP>. U počátečního tagu musí být rovněž uveden atribut NAME, který určuje jméno klikací mapy. Obecně tedy definice klikací mapy vypadá zhruba takto:

<MAP NAME="mojemapa">
  ...
</MAP>

V místě tří teček je potřeba uvést definice jednotlivých aktivních oblastí obrázku. Každá oblast je definována pomocí tagu <AREA>, který má několik atributů.

Prvním z nich je atribut HREF, který slouží k určení URL stránky, jež se má vyvolat po kliknutí na příslušnou oblast. Dalším atributem je ALT, který slouží k zadání textového popisu odkazu -- podobně jako u obrázků. Třetí atributem je SHAPE, který určuje tvar hranice aktivní oblasti. Může jít buď o obdélník (RECT), kruh (CIRCLE) nebo mnohoúhelník POLY).

Poslední atribut COORDS závisí na hodnotě atributu SHAPE. Obsahuje čárkami oddělená čísla. V případě, že definujeme obdélníkovou oblast, následuje nejprve souřadnice x a y levého horního rohu a pak x a y souřadnice pravého dolního rohu. U kružnice obsahuje atribut nejprve souřadnice x a y středu a poté poloměr. U mnohoúhelníku může být uveden libovolný počet dvojic čísel, které vyjadřují souřadnice jednotlivých vrcholů mnohoúhelníka.

Pro náš obrázek tedy definice mapy může vypadat např. takto:

<MAP NAME="mojemapa">
  <AREA HREF="Lampy.html" ALT="Osvětlovací tělesa" SHAPE=RECT COORDS="22,16,96,90">
  <AREA HREF="Tiskarny.html" ALT="Tiskárny" SHAPE=RECT COORDS="111,16,182,90">
  <AREA HREF="Help.html" ALT="Nápověda" SHAPE=POLY COORDS="200,16,272,16,272,90,200,90">
  <AREA HREF="Index.html" ALT="Zpět na hlavní stránku" SHAPE=CIRCLE COORDS="322,52,37">
</MAP>

První dvě oblasti jsme přitom definovali jako obdélníky, třetí jako mnohoúhelník a poslední jako kruh.

Když máme definovánu mapu, můžeme ji spojit s obrázkem a na stránce se již objeví klikací mapa v celé své kráse. Pro zařazení použijeme tag <IMG> jako u normálního obrázku. Pouze doplníme atribut USEMAP s URL mapy.

<IMG SRC="navbar.gif" USEMAP="#mojemapa">

Před jméno mapy musíme napsat '#', podobně jako pokud vytváříme odkaz na konkrétní místo v nějakém dokumentu. Je zcela jedno, zda je nejprve uvedena definice mapy a pak zařazení obrázku nebo obráceně. První způsob je však výhodnější, protože mapa je funkční již od té doby, co jsou zjištěny rozměry obrázku. Nesmíme však zapomenout na to, že definice mapy musí být provedena v těle stránky (uvnitř elementu BODY).

V definici souřadnic můžeme používat i čísla zakončená znakem procento '%'. V tomto případě se čísla neinterpretují jako absolutní souřadnice, ale jako poměrná část z rozměru obrázku.

Neuvedení atributu SHAPE je to stejné jako použití SHAPE=RECT.

POZOR: Pokud se oblasti v definici mapy překrývají, má vyšší prioritu dříve uvedená oblast.

V definici oblasti můžeme místo atributu HREF uvést atribut NOHREF. V tomto případě sdělujeme prohlížeči, že definovaná oblast není aktivní a kliknutí na ní nevyvolá žádnou novou stránku. Toho lze s výhodou využít, když chceme definovat aktivní oblast nestandardního tvaru -- např. záchranný kruh. Stačí definovat menší kroužek s atributem NOHREF a větší kroužek s požadovaným odkazem. Např. takto:

<AREA NOHREF SHAPE=CIRCLE COORDS="150,200,30" >
<AREA HREF="http://baywatch.com/" ALT="Stránka záchranářů" SHAPE=CIRCLE COORDS="150,200,36">

Nesmíme však zapomenout uvést nejprve neaktivní oblast, aby měla větší prioritu než oblast, ze které se snažíme kus "vykousnout".

TIP: Na obrázcích, které používáme jako klikací mapy, by mělo být jasně patrné, která část obrázku slouží jako odkaz a kam tento odkaz vede. Používání obrázků slavných impresionistů tedy není zrovna na místě. Tam, kde je to vhodné, je nejlepší do obrázku přímo zakomponovat i text, který vyjadřuje podstatu odkazu.

Nyní nám již nic nebrání v tvorbě různých navigačních lišt či jiných obrázků, které lze využít jako klikací mapy (někdy též zvané obrázky s klikou). Neměli bychom však zapomínat na naše přátele s textovými prohlížeči a u každé oblasti uvést pomocí atributu ALT textový popis odkazu.