 |
Obrázkové mapy umožňují autorům specifikovat oblast obrázku nebo
objektu a přiřadit této oblasti nějakou akci (například otevření jiné
stránky, spuštění programu atp.).
Rozlišujeme dva typy obrázkových map:
- na straně klienta - když uživatel aktivuje oblast v mapě (obvykle
kliknutím myší), prohlížeč zjistí, jaká akce je této oblasti přiřazená a
odešle požadavek na akci serveru.
- na straně serveru - po aktivaci oblasti jsou serveru odeslány
informace o pozici, na které se nachází kurzor myši, a server podle toho
přiřadí příslušnou akci.
Více preferovány jsou obrázkové mapy na
straně klienta a to ze dvou důvodů: jsou přístupné i uživatelům s
negrafickým prohlížečem a především při aktivaci je server zatěžován
konkrétním požadavkem a nemusí zjišťovat, co má vlastně provést. Proto se
zaměříme právě na tento druh obrázkových map.
K aplikaci obrázkových map vystačíte se dvěma tagy - MAP a AREA.
Element MAPTento párový tag se vám určitě bude líbit, neboť má
velmi jednoduchou syntaxi - důležitý je totiž pouze parametr name,
který určuje jméno mapy. Jeho účelem je vyznačení části kódu, kde je
specifikováno rozložení oblastí v obrázkové mapě.
Element AREAZatímco tag MAP obsahoval jen jediný parametr,
element AREA je ve srovnání s ním o něco složitější. Důležité je
zapamatovat si, že zatímco MAP byl párový tag, AREA je nepárový (norma
HTML podle W3C dokonce označuje uzavírací tag za zakázaný!). Podívejme se
tedy nejprve na jednotlivé parametry:
- shape - určuje tvar oblasti. K dispozici je čtyřúhelník
(shape="rect"), kruh (shape="circle") a mnohoúhelník
(shape="poly").
- coords - určuje umístění objektu. Parametry jsou umístěny do
společných uvozovek a odděleny čárkou. Syntaxe je závislá na tom, jaký
jste zvolili tvar oblasti (tj. co jste zapsali do parametru
shape)
- shape="rect" - udává se jako souřadnice jednotlivých hran v
pořadí levá strana-souřadnice X, horní strana-souřadnice Y, pravá
strana-souřadnice X, dolní strana-souřadnice Y. Tímto způsobem
zadáte libovolný čtyřúhelník.
- shape="circle" - zadávají se souřadnice středu a poloměr
kruhu v pořadí souřadnice X, souřadnice Y, poloměr.
- shape="poly" - postupně se zadávají souřadnice všech bodů, z
nichž se mnohoúhelník skládá v pořadí souřadnice X1,
souřadnice Y1, souřadnice X2, souřadnice Y2, ...,
souřadnice XN, souřadnice YN.
Pro úplnost zbývá dodat, že
souřadnice 0,0 je v levém horním rohu obrázkové mapy a jednotky se
udávají v pixelech.
- nohref - tento atribut použijte pouze tehdy, když oblasti
není přiřazena žádná akce.
- href - určuje adresu, na kterou vybraná oblast odkazuje.
- alt - alternativní text, který se zobrazí uživatelům, jež
mají vypnuté obrázky nebo používají textový prohlížeč.
Nyní
teoreticky umíme připravit obrázkovou mapu, ale možná jste si všimli, že
vůbec žádný parametr prohlížeči neříká, který obrázek na stránce má pro
tuto mapu použít. Vraťme se tedy ještě jednou k elementu MAP - jediným
parametrem je zde atribut name určující, jak jsme si řekli, jméno
mapy. Toto jméno je nutné zapsat k obrázku, který chceme pro tuto mapu
použít a to sice pomocí parametru usemap, který včleníme do tagu
IMG. V zásadě tedy kostra obrázkové mapy může vypadat následovně:
<HTML> <HEAD> <TITLE>obrázková
mapa</TITLE> </HEAD> <BODY> . . . vlastní
obsah stránky . <IMG src="obrazek.gif" ... ...
usemap="#obrmapa"> parametr usemap
prohlížeči sděluje, že obrázek slouží jako mapa, která bude specifikována
pod názvem obrmapa . . <MAP name="obrmap">
specifikace obrázkové mapy. To, že se tato mapa
vztahuje k obrázku obrazek.gif se prohlížeč dozví z parametru
name. <AREA href="http://www.zive.cz/".... > zde se nastavují parametry jednotlivých oblastí
obrázku <AREA href=...> <AREA
href=...> <AREA href=...> </MAP>
Zkusíme si tedy vytvořit jednoduché navigační menu ve tvaru proužku
složené z pěti ovládacích "tlačítek" (tedy obdélníkových oblastí). Začněme
tedy tím, že si v nějakém grafickém editoru vytvoříme proužek dlouhý 400
pixelů a vysoký 25 pixelů. Tento proužek vertikálně rozdělte na pět stejně
velkých oblastí (tj. každá oblast bude mít rozměry 80x25 pixelů), případně
můžete obarvit pozadí.
Do těchto oblastí vepište názvy rubrik, sekcí nebo jiné popisky, podle
kterých uživatel pozná, kam která část mapy odkazuje.
Výsledný obrázek uložte například pod názvem menu.gif.
Do stránky jej vložíte zcela jednoduše pomocí tagu IMG, ovšem
nezapomeňte na parametr usemap!
<IMG src="menu.gif" align="left" height="25" width="400"
usemap="#menu" border=0>
Nyní se již můžeme zabývat naší klikací mapou. Vzhledem k tomu, že se
jedná o obrázek, jehož oblasti jsou čtyřúhelníkového tvaru a jsou stejně
velké, bude jejich určení poměrně jednoduché.
<MAP name="menu"> <AREA shape="rect"
coords="0,0,80,25" href="http://www.zive.cz/" alt="Živě"> <AREA
shape="rect" coords="80,0,160,25" href="http://www.vltava.cz/"
alt="Vltava"> <AREA shape="rect" coords="160,0,240,25"
href="http://www.aukce.cz/" alt="Aukce"> <AREA shape="rect"
coords="240,0,320,25" href="http://www.doupe.cz/"
alt="Doupě"> <AREA shape="rect" coords="320,0,400,25"
href="http://www.pauza.cz/" alt="Pauza"> </MAP>
Pokud pak vložíte tento a předcházející kód do stránky, mělo by se vám
zobrazit naše menu, přičemž po kliknutí na to které "tlačítko" se otevře
příslušná adresa.
Poznámka: velmi důležité je určení velikosti obrázku v tagu IMG, neboť
zadáte-li velikost nesprávně, může se stát, že se jednotlivé oblasti
posunou, což bude pro návštěvníka vašich stránek velmi nemilé.
Nevýhody obrázkových map:
- Vytvoříte-li nepřehlednou obrázkovou mapu s mnoha aktivními oblastmi
(zejména nevhodné jsou pro tyto účely fotografie), bude uživatel zmaten
a jen velmi obtížně najde místo, kam má vlastně kliknout. Dejte tedy
pozor na to, aby bylo na první pohled patrné, že obrázek slouží k
navigaci.
- Řešit pomocí obrázkových všechny odkazy není zrovna nejlepší nápad,
protože obrázky jsou vždy výrazně větší, než kdybyste odkazy řešili
standardním způsobem (tj. textem pomocí tagu A). Tím zbytečně zvyšujete
"váhu" celé stránky a prodlužujete dobu nutnou k jejímu načtení.
- Obrázkové mapy nejsou podporované všemi prohlížeči, proto
nezapomeňte dát na vhodném místě k dispozici jejich alternativu, nejlépe
pomocí textových odkazů.
Výhody obrázkových map:
- Proti navigačním menu složeným z několika menších obrázků má
obrázková mapa tu výhodu, že se nestahuje několik souborů současně, ale
pouze jediný soubor, což může urychlit přenos.
- Pomocí map se dají vytvořit velmi efektně vypadající menu, kterých
bychom běžnými prostředky dosáhli jen velmi obtížně.
Ať se tedy
na svých stránkách rozhodnete pro použití obrázkových map či nikoli, přeji
vám hodně štěstí při jejich osvojování. Samozřejmě za týden se můžete
těšit na další pokračování našeho seriálu.
Související články:
Zajímá-li vás
bližší pohled na tento článek, podívejte se na něj v
souvislostech.
 |
 |