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
1Du 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 | ![[ InternetGuiden ]](../bilder/IGlogo.gif)