rychlokurs HTML
Klikací mapy

Na jiné adresy můžeme odkazovat pomocí textu nebo obrázků. Takové obrázky, jejichž různé oblasti odkazují na různá místa nebo jsou neaktivní a neodkazují nikam, nazýváme klikací mapy. Příkladem klikací mapy je lišta s kulatými tlačítky na titulní stránce katalogu Seznam - celá lišta je jediný obrázek a přitom kliknutí na každé z koleček způsobí nějakou jinou akci.

Uvedeme si, jak se vyrábí klientské klikací mapy. Definici takových map zapisujeme do html dokumentu a to, jak se mapa zachová, záleží na browseru, kterým prohlížíte stránku. S klientskými klikacími mapami umí v dnešní době pracovat všechny browsery.

<map> definice mapy

Příkazem označíme začátek definice mapy, na konec definice uvedeme </map>. Definici mapy vložíme do těla dokumentu (musí být mezi příkazy <body>), ve kterém se různých definic map může vyskytovat víc, měly by se lišit jménem.

Name= jméno mapy
Jméno můžeme ale nemusíme ohraničit uvozovkami.

<area> definice oblasti v mapě

Příkaz <area> slouží k definování oblastí jedné mapy, není proto asi divné, že se musí vyskytovat za příkazem <map>. Pro každou oblast uvedeme nový příkaz <area>, stane-li se, že se dvě oblasti překrývají, přednost bude mít ta dříve nadefinovaná.

Schéma definice mapy: 

    
<html>



<body>



<map>

<area>

<area>

</map>



<map>

</map>



</body>

</html>

Shape= circle, rect, polygon, default
Určuje, zdali se jedná o kruh, čtyřúhelník, mnohoúhelník nebo zbylou neurčenou oblast ("odřezek"). Ke každému z geometrických útvarů se požadují trochu jiné souřadnice Coords.

Coords= seznam souřadnic oddělený čárkami
Jedná se o souřadnice uvnitř obrázku, které definují oblast. Seznam souřadnic může být pro jistotu z obou stran uzavřený v uvozovkách. Jde-li o kruh, očekávají se tři hodnoty: x-ová a y-ová souřadnice středu kruhu a jeho poloměr. Jde-li o čtyřúhelník, očekávají se čtyři hodnoty: x-ová a y-ová souřadnice levého horního a pravého dolního rohu. Jde-li o mnohoúhelník, očekává se prostý seznam x-ových a y-ových souřadnic, které definují oblast. Jde-li o odřezek, atribut Coords se neuvádí.

Href= URL odkazu
Udává, kam která oblast odkazuje.

Nohref
Chceme-li, aby daná oblast byla neaktivní, uvedeme u ní atribut Nohref.

<img> obrázek

Příkazu pro obrázek přibyl ještě jeden atribut, který obrázku přiřazuje jeho mapu. Obrázek se potom bude chovat jako klikací mapa.

Usemap= #jméno mapy
Před jménem nezapomeňte uvést mřížku #, jméno může být uzavřeno v uvozovkách (včetně mřížky). Příklad použití je v následujícím odstavci.

Příklad mapy

Máme následující obrázek s kruhem, čtyřúhelníkem a trojúhelníkem. Chceme, aby každý geometrický útvar odkazoval někam jinam. Ale pozor - čtyřúhelník je děravý a nechceme, aby jeho prázdný střed byl aktivní.

Obrázek:

Zdrojový text příkladu: 

    
<html>



<body>



<map name=moje_mapka>

	<area shape=circle coords="36,36,40" 

                  href=http://www.tlp.cz>

	<area shape=rect coords="120,23,147,54" 

                  nohref>

	<area shape=rect coords="102,6,167,72" 

                  href=internet>

	<area shape=polygon 

                  coords="235,1,205,70,274,70" 

                  href=internet/hatmatilka>

	<area shape=default 

                  nohref>

</map> 



<img src="mapka.gif" usemap=#moje_mapka border=0>



</body>



</html>

Výsledek příkladu:

Mapu jsme nadefinovali příkazem <map>, označili jsme ji jménem. Podívejte se, že prázdný střed čtyřúhelníku jsme museli dát před samotnou definici čtyřúhelníku. V místech, kde se oblasti překrývají, má totiž přednost dříve nadefinovaná oblast. Nakonec požadujeme, aby zbylá oblast obrázku neodkazovala nikam. Kdyby jsme to neuvedli, nic by se samozřejmě nestalo. Pokud však zbylou oblast zmiňujeme (kdybychom třeba přecejenom chtěli, aby odkazovala na nějaké místo), museli bychom ji zmínit vždy až na konci. Na začátku definice by přebila všechny ostatní oblasti - jedná se o ten samý problém, co se středem čtyřúhelníku. V příkazu <img> přibyl atribut přiřazující k obrázku jeho mapu, před jméno mapy dáme mřížku #.

Pavel Pospíšil