InternetGuiden

1997

Image maps
För att få en snygg förstasida med menyer och knappar, är det vanligt att göra den som en bild. Med image maps lägger du olika länkar under de olika knapparna, eller vad du nu valt, i bilden.

Text: Annica Tiger, atiger@swipnet.se

Dessa förkunskaper behövs:
*
Grundläggande kunskaper i att använda markeringsspråker HTML.
Har du inte det?
En bra bok för en nybörjare är "Lättpocket om att göra en egen hemsida" av Jesper Ek Paginas förlag. Du kan även besöka Annica Tigers HTML nybörjarguide på http://www.atiger.pp.se/

För att länka en del av en bild en meny eller karta kanske till en viss text eller annat ställe på sajten, så använder du image maps.
Då kan du dela upp en bild i flera klickbara områden (hotspots), som vart och ett leder till ett specificerat html-dokument. På en karta över Sverige, exempelvis, kan du länka så att när besökaren klickar där Stockholm ligger, så kommer han till en text om Stockholm. Fördelen med Image maps är att du kan göra mycket små, oregelbundet formade och olika stora delar av bilden klicka bara.

CLIENT-SIDE IMAGE MAP
Den här sortens image map är att den går att testa och köra lokalt till skillnad mot dess motsvarighet som körs via servern. Eftersom beräkningarna av bilden sköts av webläsaren går det oftast snabbare med en client-side image map. En annan fördel är även att det i statusraden syns vart länkarna leder. En nackdel är dock att äldre webläsare inte stödjer denna image map.

MAP-kartan
1
Du skriver map-kartan direkt i ditt html-dokument. Map-kartan skall namnges med ett lämpligt namn. Allt för att du sedan i bildtaggen (img) ska kunna anropa din specifika map-karta.
<map name="namnet">
<area shape="rect" coords="x,y,x,y" href="sidan.html" alt="Alternativtext">
<area shape="default" nohref></map>

SHAPE-formen
2
Formen på den klickbara ytan anges via shape och med rect (rectangle), poly (polygon) eller circle. Med default kan du ange vad som ska hända om de klickar utanför dina "hotspots", antingen ingenting nohref eller ange href="annan/samma_sida.html".

COORDS-koordinaterna
3
Du anger det klickbara området med hjälp av coords, varje koordinat separerad med ett kommatecken. I en rectangle (rect) anges övre vänstra hörnets x,y samt nedre högra hörnets x,y-koordinater.
Med polygon (poly) avses ett egendefinierat område. Det spelar ingen roll i vilken punkt man börjar, men alla punkter (x,y) ska anges i den ordning de kommer om man följer polygonens kant. Startpunkten är alltid synonym med slutpunkten, dvs en polygon är sluten. Att bestämma cirklar (circle) görs genom att ange dess centrum med x och y samt cirkelns radie med z.

ALT alternativtext
4
Med alt så specificerar du den alternativtext som ska synas när exempelvis besökaren har bildvisningen avslagen. Det är även denna text som syns i en liten gul "länkruta" som poppar upp i ns 4.0 och i ie 3.0/4.0.

USEMAP anropa mapkartan
5
Sedan skriver du in din IMG-tagg som vanligt i ditt dokument där bilden ska ligga. För att anropa map-kartan som du har namngett lägger du till attributet usemap.
<img src="bild.gif" usemap="#namnet" height=n border=0 width=n alt="Bildens alternativtext">
Glöm ej # före mapnamnet!

KOORDINATERNA
- ta fram dem

Detta kan göras i ett bra bildbehandlingsprogram, exempelvis Paint Shop Pro, se relaterade länkar eller i Photoshop. I Paint Shop Pro ser du x och y koordinaterna i statusraden. I Photoshop tar du fram via Fönster, Visa Info den palett som visar x och y-koordinaterna. Det finns även olika sharewareprogram som gör hela jobbet åt dig, se relaterade länkar.

SERVER-SIDE IMAGE MAP
Istället för att lägga map-informationen i ditt html-dokument kan du lägga den i en speciell map-fil (ren ascii text) på servern med filändelsen .map, under förutsättning att just din server stödjer detta. Är du osäker kontakta din serveransvarige för mer information, eventuellt ska du ange annan sökväg än i exemplet nedan. För att anropa mapfilen skriver du
<a href="mapfil map"><img src="bild.gif" border=0 height=225 width=292 ismap></a>.
Så här ser motsvarande mapfil ut för nsca (vanligast). Observera den annorlunda skrivningen för just circle, se bildexemplet, och att koordinatparen separeras med ett mellanslag samt att som default ska anges ett filnamn. Glöm ej ismap i img-taggen!
#Nos
poly nos.html 8,94 77,52 77,121
#Mage
rect mage.html 119,146 217,181
#Svans
circle svans.html 237,37 263,64
default någon_fil.html

KOMBINERAD MAP
Bäst att använda om möjlighet finnes är givetvis en kombinerad map. Den webläsare som ej kan hantera client-side image map kan då navigera via server-side image map. Du gör en map-fil och lägger upp på servern samt kodar in map-kartan i html-dokumentet och anropar via
<a href="mapfil.map">
<img src="bild.gif" usemap="#namnet"
border=0
height=225
width=292
ismap>
</a>


Relaterade länkar
Paint Shop Pro
http://www.jasc.com/
MapEdit
http://www.boutell.com/mapedit/
MapThis
http://www.killersites.com/
http://galadriel.ecaetc.ohio-state.edu/tc/mt/


Undvik de vanligaste misstagen

Tänk på bandbreddens begränsningar, använd inte för stora bilder i kB mätt. Besökaren kanske hinner tröttna och lämna din sida innan hela bilden laddats in! Som en extra service, glöm inte bort att förse din sida med alternativa vanliga textlänkar. Då kan även besökare med äldre webläsare navigera på din sida om du använder en client-side image map.

PROFFSENS BÄSTA TIPS
Vilka är fördelarna med image maps?
Kricke Perez, communityansvarig på Passagen
- Om man vill lägga in flera olika länkar från en och samma bild så är Image maps en bra lösning. Att använda image maps är också ett bra sätt att spara på antalet bilder man använder på en websida, och det gör ofta att den går fortare att ladda.
Vilka är nackdelarna?
- Nästan inga, även låga versioner av de flesta webläsare stöder image maps, och vill man gardera sig kan man lägga in både client side och server side image maps.
Har du några speciella knep?
- Map-koden bör ligga "högt upp" i html-dokumentet, det är enklast att hålla sig till rektangulära former (det blir så mycket koordinater att hålla reda på annars), och det kan vara bra att lägga in onMouseOver-texter till länkarna, förutsatt att man använder det för att berätta mer om vad som döljer sig bakom länken förstås.
http://www.passagen.se/ och http://www.passagen.se/cafe

Måns Jonasson, pagemaster, Telenordia Internet
- Det går lätt att skapa en enhetlig navigation på en sajt, som är bra förankrad i den grafiska mallen.
Och nackdelarna?
- Tja, Image maps funkar ju till och med i Lynx, så jag ser inga direkta nackdelar. Skulle vara att det lockar folk att göra tunga jätte-blaffor till grafik på sina sidor, med image maps.
Har du några speciella knep?
- Jag använder clientside nuförtiden, det har bra stöd i de flesta webläsare. Lägger också gärna in onMouse
Overs i map:en för att förklara var man tar vägen i statusraden.
http://www.algonet.se/

Till början av sidan