Man kan göra att en bild blir till en länk med följande kod:<br>
<div class=code><A HREF="Jump.htm"><IMG SRC="EnBild.gif"></A>
</div>
men om man har en stor bild (t.ex. ett gruppfoto) kan man även dela upp bilden i olika delar.
Nedan ses ett kodexempel:<div class=code>
<MAP NAME="map1"><br>
<AREA SHAPE="RECT" COORDS="0, 0, 40, 100"
    HREF="javascript:alert('Vänstra delen')"><br>
<AREA SHAPE="RECT" COORDS="60, 0, 100, 50"
    HREF="javascript:alert('Övre högra hörnet')"> <br>
</MAP><br>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map1"><br><br>
</div>
ger oss följande resultat:<br>
<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="../images/demo.gif" USEMAP="#map1"><br>
Prova flytta omkring musmarkören ovanför bilder.<br>
<br>
<TABLE BORDER=1 WIDTH=80%>
<THEAD>
<TR><TH>Text</TH><TH>Förklaring</TH></TR>
<TBODY>
<TR><TD>MAP NAME="xxx"</TD><TD>
Betämmer namnet på "kartan" över klickbara områden</TD></TR>
<TR><TD>
SHAPE
</TD><TD>
Bestämmer områdets form<br>
Kan vara:<br>
"RECT" rectangel<br>
"CIRC" cirkel<br>
"POLY" månghörning<br>
</TD></TR>
<TR><TD>COORDS</TD><TD>Kordinater. Dessa är:<br>
för "RECT" x, y, bredd, höjd<br>
för "CIRC" x, y, radie<br>
för "POLY" x,y x1,y1 x2,y2 ... för de olika hörnen (minst tre kordinatpar)<br>
</TD></TR>
<TR><TD>HREF</TD><TD>Länk (här använder jag en annan metod för att inte behöva "hoppa omkring")</TD></TR>
<TR><TD>/MAP</TD><TD>Avslutar "kartinställningarna"</TD></TR>
<TR><TD>IMG</TD><TD>Vanlig IMG för insätting av bilder</TD></TR>
<TR><TD>USEMAP=#xxx</TD><TD>Använd den namngivna "kartan"</TD></TR>
</TABLE><br>
Kordinatsystemet är följande (Bilden antas vara 100*100 pixels stor):<UL>
<LI>Övre vänstra hörnet är x = 0, y = 0
<LI>Nedre vänstra hörnet är x = 0, y = 100
<LI>Övre högra hörnet är x = 100, y = 0
<LI>Nedre högra hörnet är x = 100, y = 100
<LI>Mitten finns på x = 50, y = 50
</UL>
<hr>
Ett till exempel (Verkar inte fungera med Netscape):
<div class=code>
<MAP NAME="map2"><br>
<AREA SHAPE="CIRC" COORDS="50, 50, 50" HREF="javascript:alert('Got Me!')"> <br>
</MAP><br>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map2"><br><br>
</div>
ger oss följande resultat:<br>
<MAP NAME="map2">
<AREA SHAPE="CIRC" COORDS="50, 50, 50" HREF="javascript:alert('Got Me!')">
</MAP>
<IMG BORDER=0 SRC="../images/demo.gif" USEMAP="#map2"><br>
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.<br>
<hr>
Överlappande areor kan även fungera (ibland, Netscape verkar ha problem) :
<div class=code>
<MAP NAME="map3"><br>
<AREA SHAPE="CIRC" COORDS="50, 50, 15"
    HREF="javascript:alert('BullsEye, Champ!')"><br>
<AREA SHAPE="CIRC" COORDS="50, 50, 50"
    HREF="javascript:alert('Du siktar dåligt!')"><br>
</MAP><br>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map3"><br><br>
</div>
ger oss följande resultat (Prova klicka i mitten och längre ut):<br>
<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="../images/demo.gif" USEMAP="#map3"><br>
<hr>
Exempel på polygon:
<div class=code>
<MAP NAME="map4"><br>
<AREA SHAPE="POLY" COORDS="0,0 0,100 100,0"
    HREF="javascript:alert('Något snedvriden?')"> <br>
</MAP><br>
<IMG BORDER=0 SRC="demo.gif" USEMAP="#map4"><br><br>
</div>
ger oss följande resultat (den övre vänstra diagonalen är klickbar):<br>
<MAP NAME="map4">
<AREA SHAPE="POLY" COORDS="0,0 0,100 100,0" HREF="javascript:alert('Något snedvriden?')">
</MAP>
<IMG BORDER=0 SRC="../images/demo.gif" USEMAP="#map4"><br>