Klikací mapy

Tag Význam Párový Výskyt
map klikací mapa ano  
area oblast v klikací mapě ne <map>

Klikací mapy jsou jakýmsi křížencem obrázků a odkazů.

Velký problém s použitím klikacích map přišel s responzivním zobrazením, kdy se obrázky do telefonů zmenšují, ale klikací mapy se zmenšit neumějí. To vede k tomu, že mapa stále vymezuje pixelové souřadnice, pod kterými ale může být úplně jiná část zmenšeného nebo zvětšeného obrázku. :-) Neznám jednoduché řešení, takže v praxi je lepší klikací mapy používat jen u obrázků, které se zobrazí vždy ve svých skutečných rozměrech.

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é. 

Klikatelné oblasti jsou uvnitř mapy definovány pomocí tagů <area>.

Příklad:
<map name="ctverecky">
<area href="prvni.htm" shape="rect" coords="80, 80, 130, 130">
<area href="druha.htm" shape="rect" coords="20, 20, 50, 50">
</map>

Samotné připojení mapy k obrázku se dělá atributem usemap u tagu img. Jako hodnotu pro usemap je důležité použít stejné jméno, které má uvedena i mapa v atributu name.

<img src="obrazek.gif" usemap="#ctverecky" width="150" height="150">

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.

Atributy tagu <area>
Atribut Význam Hodnoty
href cíl odkazu URL
target cílový rám jméno rámu
shape tvar oblasti rect, circle, polygon
coords souřadnice oblasti čísla oddělená čárkami
nohref oblast není odkazem bez hodnot
alt alternativní text libovolný text

Atributy href a target jsou stejné jako u odkazů. Z obecných atributů vypichuji atribut title, který v novějších prohlížečích zobrazuje u myši nad oblastí bublinu s textem. Atribut alt takto nefunguje, ten má význam pouze pro negrafické klienty.

Atrribut shape určuje tvar oblasti, podle toho se potom mění význam hodnot atributu coords. Ten obsahuje souřadnice v pixelech, přičemž počátek souřadnic je levý horní roh mapy (tedy obrázku) a y roste směrem dolů.

Tag <area>, atributy shape a coords
shape= Význam zadává se coords=""
rect obdélník levý horní roh, pravý dolní roh lh-x, lh-y, pd-x, pd-y
circle kruh střed, poloměr střed-x, střed-y, poloměr
polygon mnohoúhelník souřadnice každého vrcholu za sebou vrchol1-x, vrchol1-y, vrchol2-x, vrchol2-y, atd.

Jsou možné i alternativní hodnoty circ, poly a rectangle se stejnou funkcí. Pokud se dvě oblasti překrývají, je ta pozdější jakoby vespod (dlouho jsem zde měl chybnou informaci, že je navrchu). Jinak řečeno v překrývaných kouscích vyhrává ta area, která je první.

Atribut nohref byl vymyšlen pro tvorbu tvarů, které nikam neklikají. To používá např. pro tvorbu klikacích mezikruží, kdy větší circle někam kliká. Uvnitř většího kruhu je menší (v kódu uvedený jako první) s atributem nohref.

HTML zápis klikacích map je poněkud složitý. Naštěstí některé HTML editory zvládají jejich zápis tak, že autorovi pouze stačí šoupat myší (FrontPage, Web Expression a určitě i další).

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.