Jak vytvářet www stránky - 21. díl
Obrázkové mapy
Tématem tohoto dílu budou obrázkové nebo též "klikací" mapy. Názory na jejich použití se liší - můžete se setkat s názory, že klikací mapy jsou přežitkem a jejich použití není z mnoha důvodů doporučené, jiné zdroje je zase doporučují, neboť umožňují snadné vytváření různých menu. Ať je pravda na té které straně, obrázkové mapy jsou součástí HTML a proto v našem seriálu prostě nemohou chybět.
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 MAP
Tento 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 AREA
Zatí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.
|
