Vyznačíme si na obrázku oblasti, které budou fungovat jako odkazy.

Jak udělat z celého obrázku odkaz, vás jistě napadne. Není to nic složitého stačí tag, kterým obrázek vkládáme „obalit“ odkazem. Například takto:

Udělat odkaz z celého obrázku není nic těžkého, ale někdy se může stát, že je potřeba vyznačit jen některé části obrázku jako odkaz (příkladem může být to, když chcete na stránky dát společnou fotku svých přátel a po kliknutí na určitý obličej se zobrazí stránka s podrobnými informacemi o jednom kamarádovi). Přesně k takovému účelu existují klikací mapy.

Tvorbu každé klikací mapy bysme měli začít tím, že si rozmyslíme, jak rozmístíme po obrázku aktivní oblasti, které budou sloužit jako odkazy. Pokud už máte jasno, můžete začít tvořit.

Každá mapa musí mít nějaké jméno, kterým ji pak budeme vyvolávat, to určíme v párovém tagu <map></map> pomocí atributu name=““. Jeho hodnotou je téměř libovolný řetězec (vyhýbejte se diakritice a zvláštním znakům), který by měl být v rámci dokumentu jedinečný.

map

Klikací mapa obrázku. V dokumentu se tento element nijak nezobrazuje, pouze způsobuje, že obrázek bude ně některých místech klikat jako odkaz. Mapa obsahuje popis aktivních oblastí, které jsou reprezentovány tagy <area>.

Pomocí jména — atributu name — je mapa spojena s obrázkem (atribut usemap u <img>). Name může být libovolný název. Jedna mapa může být teoreticky přiřazena k více obrázkům, nenapadá mě ale situace, kdy je to užitečné.

Jméno mapy

Mapa má své jméno a je čas jí nastavit nějaké aktivní oblasti. To uděláme pomocí tagu <area>. Většinu atributů má tento tag stejných jako běžný odkaz – <a></a>, ale některé má navíc, takže na ty se podíváme podrobně.

U každé definované oblasti byste měli nastavit atribut href=““. Někdy může nastat případ, že chcete udělat odkaz z celého obrázku kromě nějaké jeho části, potom použijte místo href=““ atribut nohref, který nemá žádnou hodnotu – takto označená oblast se pak chová jako obyčejný obrázek.

Popisek odkazu můžete přidat pomocí atributu alt=““.

area

Aktivní oblast v mapě. Nepárový tag. Nezobrazuje se. Může se vyskytovat pouze v elementu <map>. Area vymezuje oblast obrázku, na kterou se dá kliknout jako na odkaz. V jednom elementu <map> může být neomezeně elemetů <area>, každá pro jednu aktivní oblast.

Vyznačení oblasti

Pokud chceme vyznačit na obrázku nějakou oblast, musíme prohlížeči sdělit jaký bude mít tvar, tedy jaké má očekávat vstupní souřadnice. K tomu použijeme atribut shape=““. Na výběr máme tyto tři hodnoty:

• rect – oblast bude mít tvar obdélníku,
• circle – oblast bude kruhová,
• poly – oblastí bude polygon neboli mnohoúhelník.

Pokud atribut shape=““ nepoužijete, předpokládá se, že budete zadávat obdélník.

Souřadnice oblasti

Ještě určíme souřadnice vyznačované oblasti a máme naši první oblast v klikací mapě hotovou. Pro určení souřednic je připraven atribut coords=““. Jaká data vložit jako hodnotu atributu coords=““ je trochu složitější, záleží totiž na tom, jaký tvar chceme popisovat.

Obecně ale platí, že veškeré souřadnice se dají popisovat buď pomocí pixelů nebo procent, za počátek se považuje levý horní roh obrázku a jednotlivé hodnoty se oddělují pomocí čárek – „,“.

• Pokud vymezujete obdélník zadejte vodorovnou a svislou souřadnici levého horního a pravého dolního rohu, např.: 7,7,50,50.
• U kruhové oblasti vystačíte se zadáním souřednic středu a poloměru, např.: 25,25,11.
• A pro mnohoúhelník je situace nejsložitější, to musíte vypsat souřadnice každého bodu zvlášť, např.: 19,12,15,22,47,50,19,12

Propojení s obrázkem

Poslední, co musíme pro zprovoznění klikací mapy udělat, je její propojení s obrázkem. To jde velmi jednoduše, stačí do tagu <img>, kterým vyvoláváme obrázek, přidat atribut usemap=““ a jako jeho hodnotu uvést #jmeno_mapy. V našem případě by takové vyvolání vypadalo asi následovně:

Může se vám také stát, že se budou oblasti definované na obrázku překrývat, v tom případě má přednost oblast, které byla uvedena dříve.