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