area - Český HTML 5 manuál
Tag <area> označuje jednu oblast na mapě (obrázku) a vkládá se do tagu <map>. Typicky se jedná o různé tvary, které zaktivní určité části obrázku, které poté fungují jako odkazy.
Atributy
Tento tag má hned několik atributů:
- alt - Alternativní text k oblasti obrázku.
- coords - Souřadnice oblasti.
- href - Odkaz na stránku, která se otevře po kliknutí na oblast.
- hreflang - Kód jazyka.
- media - Možnost specifikovat zařízení, pro které je výsledná stránka optimalizovaná (pravidlo @media).
- rel - Vztah mezi aktuálním a cílovým dokumentem, stejné jako u tagu <a>.
- shape - Tvar oblasti. Na výběr máme:
- default - Celý obrázek.
- rect - Obdélník - Souřadnice určíme jako levá, horní, pravá, dolní vzdálenost od levého/horního okraje obrázku. Př.: 16, 16, 50, 50
- circle - Kruh, souřadnice určíme jako souřadnice středu a poloměr. Př.: 35, 40, 120
- poly - Mnohoúhelník. Určíme souřadnice jednotlivých bodů př.: 200, 16, 272, 16, 272, ...
- target - Kde se má cílový dokument otevřít (jako u odkazu).
- type - MIME typ cílového URL.
Mapu k obrázku přiřadíme pomocí atributu usemap, kde nastavíme jako hodnotu jméno tagu <map> jako by to bylo ID.
Ukázka použít
Uveďme si jednoduchý příklad, kde si uděláme mapu odkazů na obrázku ptáčka.
<img src="ptak.jpg" width="400" height="241" usemap="#map" alt="Pták" /> <map name="map"> <area shape="circle" coords="8,12,224" title="První odkaz" alt="První odkaz" href="#" /> <area shape="rect" coords="180,159,398,238" title="Druhý odkaz" alt="Druhý odkaz" href="#" /> <area shape="circle" coords="180,10,200" title="Třetí odkaz" alt="Třetí odkaz" href="#" /> </map>
Výsledek si vyzkoušejte:
Pro vytvoření obrázkové mapy můžete použít i automatizované programy, touto funkcí disponuje např. GIMP (filtry - www - obrázková mapa).