Tvorba webu » HTML » Klikací mapy v HTML

Klikací mapy v HTML

Pokud z jednoho obrázku chcete vytvořit více odkazů můžete využít klikací mapy.

Map - klikací mapa

Klikací mapa určuje aktivní a neaktivní místa obrázku který bude fungovat jako odkaz pomocí atributu name se mapa přiřadí k určitému obrázku.Tento tag je párový.

<map>
....definice aktivních a neaktivních oblastí.....
</map>
<img src="obrazek.gif" usemap="#mojemapa">

Name - atribut

Atribut name slouží k přiřazení obrázku ke klikací mapě jako jeho hodnota se uvádí hodnota usemap která je uvedena u obrázku ale bez znaku #.

<map name="mojemapa">
....definice aktivních a neaktivních oblastí....
</map>
<img src="obrazek.gif" usemap="#mojemapa">

Area - aktivní oblast v mapě

Tag area slouží k nastavení aktivních a neaktivních míst obrázku tento tag je nepárový a vyskytuje se pouze v elementu <map>

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

Href - atribut

Atribut href slouží k nastavení url které se zobrazí po kliknutí na aktivní část klikací mapy.

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

Nohref - atribut

Atribut nohref nastavuje část klikací mapy která nebude odkazem, často se používá jako menší část v aktivní oblasti

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

Alt - atribut

Atribut alt slouží jako alternativní text zobrazuje se pokud se nezobrazí obrázky nebo po najetí na obrázek ve žluté bublině, jako hodnota se používá popis obrázku.

Target - atribut

Atribut target se používá k nastavení okna v kterém se bude stránka načítat se využije hlavně s rámy které dokážou okno stránky rozdělit na několik částí.

Jeho hodnoty jsou:

• _blank při použití se stránka načte v novém okně a všechny rámy se zruší

• _top a požije se jako nejvyšší okno hierarchie rámů

• _parent použije se jako nadřazený rám

• _self se použije jako stejný rám tedy ten z kterého je odkazováno. Pokud zadáte jméno neexistující rámu načte se nové okno.

Shape - atribut

Atribut shape určuje tvar oblasti možné hodnoty jsou rect neboli obdélník, circle neboli kruh a nakonec poligon což je mnohoúhelník.

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

Coords - atribut

Atribut coords určuje tvar aktivní oblasti, pokud chcete obdélník (rect) zadáte levý horní roh a pravý dolní roh vše odděleno čárkami, pokud chcete kruh (circle) zadáte nejdříve střed a pak poloměr u mnohoúhelníku (poligon) se zadávají jednotlivé vrcholy tak jak jdou za sebou, všechny souřaadnice se oddělují čárkami

Příklad:

<map name="mapa">
<area href="http://rneco.wz.cz" shape="rect" coords="13,20,113,64">
<area href="http://rneco.wz.cz/w3" shape="rect" coords="130,21,244,64">
<area href="http://rneco.wz.cz/e3/html" shape="rect" coords="13,78,111,125">
<area href="http://rneco.wz.cz/w3/html/priklady" shape="rect" coords="128,76,239,132">
</map>
<img src="mapa.gif" usemap="#mapa">

zobrazit výsledek

Reklama