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/
|