Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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: Pták

První odkaz Druhý odkaz Třetí odkaz Pro vytvoření obrázkové mapy můžete použít i automatizované programy, touto funkcí disponuje např. GIMP (filtry - www - obrázková mapa).


 

Všechny články v sekci
Multimédia - Český HTML 5 manuál
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity