Länkar från en del av en bild

Man kan göra att en bild blir till en länk med följande kod:

<A HREF="Jump.htm"><IMG SRC="EnBild.gif"></A>

men om man har en stor bild (t.ex. ett gruppfoto) kan man även dela upp bilden i olika delar. Nedan ses ett kodexempel:

<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="0, 0, 40, 100" HREF="javascript:alert('Vänstra delen')">
<AREA SHAPE="RECT" COORDS="60, 0, 100, 50" HREF="javascript:alert('Övre högra hörnet')">
</MAP>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map1"><br>

ger oss följande resultat:

Prova flytta omkring musmarkören ovanför bilder.

Text	Förklaring
MAP NAME="xxx"	Betämmer namnet på "kartan" över klickbara områden
SHAPE	Bestämmer områdets form Kan vara:  "RECT" rectangel  "CIRC" cirkel  "POLY" månghörning
COORDS	Kordinater. Dessa är: för "RECT" x, y, bredd, höjd för "CIRC" x, y, radie för "POLY" x,y x1,y1 x2,y2 ... för de olika hörnen (minst tre kordinatpar)
HREF	Länk (här använder jag en annan metod för att inte behöva "hoppa omkring")
/MAP	Avslutar "kartinställningarna"
IMG	Vanlig IMG för insätting av bilder
USEMAP=#xxx	Använd den namngivna "kartan"

Kordinatsystemet är följande (Bilden antas vara 100*100 pixels stor):

• Övre vänstra hörnet är x = 0, y = 0
• Nedre vänstra hörnet är x = 0, y = 100
• Övre högra hörnet är x = 100, y = 0
• Nedre högra hörnet är x = 100, y = 100
• Mitten finns på x = 50, y = 50

---

Ett till exempel (Verkar inte fungera med Netscape):

<MAP NAME="map2">
<AREA SHAPE="CIRC" COORDS="50, 50, 50" HREF="javascript:alert('Got Me!')">
</MAP>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map2"><br>

ger oss följande resultat:

Lägg märke till att du måste sätta musmarkören på cirkeln i bilden för att den skall bli en "hand". Om jag skulle ha använt en "RECT" skulle man kunnat klicka utanför och ändå fått en klickhändelse.

---

Överlappande areor kan även fungera (ibland, Netscape verkar ha problem) :

<MAP NAME="map3">
<AREA SHAPE="CIRC" COORDS="50, 50, 15" HREF="javascript:alert('BullsEye, Champ!')">
<AREA SHAPE="CIRC" COORDS="50, 50, 50" HREF="javascript:alert('Du siktar dåligt!')">
</MAP>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map3"><br>

ger oss följande resultat (Prova klicka i mitten och längre ut):

---

Exempel på polygon:

<MAP NAME="map4">
<AREA SHAPE="POLY" COORDS="0,0 0,100 100,0" HREF="javascript:alert('Något snedvriden?')">
</MAP>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map4"><br>

ger oss följande resultat (den övre vänstra diagonalen är klickbar):