Tvorba webu » HTML » Klikací mapy v HTML

Klikací mapy v HTML

Pomocí klikací mapy můžete z jednoho obrázku vytvořit více odkazů.

Map - klikací mapa

Klikací mapa určuje aktivní a neaktivní oblasti obrázku, které budou odkazy.

Atributem name se obrázek spojí s klikací mapou, jak ukazuje příklad.

<map name="mojemapa">
</map>
<img src="obrazek.gif" usemap="#mojemapa">

Area - aktivní nebo neaktivní oblast v mapě

Area slouží k nastavení aktivních a neaktivních oblastí obrázku.

Atributy:

• Href – nastavení URL jako u odkazů.
• Nohref – nastavuje část klikací mapy, která nebude odkazem.
• Alt – alternativní text jako u obrázků.
• Target – funguje stejně jako u odkazů.
• Shape – tvar aktivní nebo neaktivní oblasti.
• Coords – souřadnice.

Shape

Shape určuje tvar oblasti. Možné hodnoty jsou:

• rect = obdélník
• circle = kruh
• poly = mnohoúhelník

<map name="mojemapa">
<area href="stranka.html" shape="rect">
</map>
<img src="obrazek.gif" usemap="#mojemapa">

Coords

Atribut coords určuje souřadnice oblasti. Souřadnice jednoduše zjistíte například v Malování.

Pokud chcete obdélník (rect), zadáte levý horní a pravý dolní roh, vše oddělíte čárkami. U kruhu (circle) zadáte nejdříve střed a potom poloměr. U mnohoúhelníku (poly) se zadávají jednotlivé vrcholy v pořadí, v jakém za sebou následují.

Příklad hotové mapy se čtyřmi obdélníky:

<map name="mapa">
<area href="http://www.seznam.cz" shape="rect" coords="17,16,116,60">
<area href="http://www.google.com/" shape="rect" coords="138,16,233,60">
<area href="http://www.kratce.info/" shape="rect" coords="17,84,116,133">
<area href="http://www.jakdelatweby.cz/php/" shape="rect" coords="138,84,234,132">
</map>
<img src="mapa.png" usemap="#mapa" border="0">

zobrazit výsledek

Reklama