area - Český HTML 5 manuál

HTML a CSS Manuál Multimédia 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).

 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Multimédia - Český HTML 5 manuál

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!