Zetterström

Kartor - bilder som man kan klicka på

Det finns två sätt att definiera kartor, det vill säga bilder där olika områden är länkar till olika ställen. Den äldsta versionen använde sig av ISMAP som är mer avancerad och troligtvis kommer att försvinna nästan helt inom kort. Antagligen kommer det aldrig att strykas ur standarden på grund av kompatibilitet bakåt men det nya sättet med USEMAP är både bättre, enklare och snabbare. Det gamla sättet krävde att servern skulle beräkna vart länken skulle leda medan det nya överlämnar denna uppgift till webläsaren. Därför kan webläsaren direkt upplysa användaren om var han kommer att hamna då han klickar på ett område i bilden.

Det första man gör är att infoga bilden i dokumentet på vanligt vis. Dock lägger man till USEMAP="" och namnet på den karta man skapar inom citationstecken.

Därefter använder man märket <MAP NAME=""> och anger ett namn på kartan inom citationstecknen. Kartan avslutas med </MAP>. Själva kartan består av märket <AREA> som måste förekomma minst en gång i kartan. I <AREA> märket kan man ange SHAPE, COORDS, HREF och ALT. ALT är alternativ text som visas om det inte skulle gå att visa bilden. HREF anger en URL precis som i <A HREF="">. Med COORDS anger man koordinater åtskilda av kommatecken ','. Hur många koordinater som ska anges beror på vad man ställt in SHAPE till. Det finns tre möjligheter:

SHAPE="RECT" för att ange en rektangel: vänstra x-koordinaten, övre y-koordinaten, högra x-koordinaten och slutligen nedre y-koordinaten.

SHAPE="CIRCLE" för att ange en cirkel: x-koordinaten för centrum, y-koordinaten för centrum, radien.

SHAPE="POLY" för att ange en polygon: första x-koordinaten, första y-koordinaten, andra x-koordinaten, andra y-koordinaten och så vidare.

Här följer ett exempel på HTML-koden för en karta:

<IMG SRC="./menu1.gif" USEMAP="main.htm#menu1">

<MAP NAME="menu1">
    <AREA SHAPE="RECT" COORDS="0,0,230,150" HREF="text.htm">
    <AREA SHAPE="RECT" COORDS="190,140,310,205" HREF="buns.htm">
    <AREA SHAPE="RECT" COORDS="300,140,470,265" HREF="crazy.htm">
    <AREA SHAPE="RECT" COORDS="0,180,185,260" HREF="about_us.htm">
    <AREA SHAPE="RECT" COORDS="250,0,480,120" HREF="music.htm">
</MAP>