Bildkartor

1. Inledning
2. Klickbara bilder
3. Thumbnails
4. Bildkartor (image maps)

1. Inledning

Jag har valt att kalla den här sidan för "Bildkartor" och huvuddelen av den ägnas också åt detta. Men eftersom bildkartor tillhör familjen "klickbara bilder", har jag börjat med ett avsnitt om vad sådana är. Du hittar också ett kort avsnitt om "thumbnails", som också är en slags klickbara bilder.

2. Klickbara bilder

Med "klickbar bild" menas en bild som fungerar som en hyperlänk: när du klickar på bilden aktiveras en länk. Detta är alltså en funktion som kan användas i stället för textlänkar. Givetvis måste bilden då ha någon slags förklaring av vart länken leder, genom att det finns en text i själva bilden, eller under den.

Att skapa en klickbar bild är mycket enkelt. Man lägger helt enkelt ett <A>-element omkring ett <IMG>-element. Det ser ut så här:

Här har jag färglagt länkens kod för att du enklare skall kunna se vad som är vad. Naturligtvis fyller du också i width, height och alt, som vanligt för bilder. Det hela ser ut så här:

Om du håller nere musknappen på bilden framträder en ful ram. För att ta bort ramen runt bilden, måste du skriva in ett border="0" inne i <IMG>, dvs:

<IMG src="Bildens filnamn" width="" height="" alt="" border="0">

vilket resulterar i att ramen försvinner:

Som du ser fungerar den här bilden inte särskilt bra som länk, eftersom det inte går att se vart den leder. Därför kan man lägga till information om detta:


Våra luncher!

Länken under den vänstra bilden fungerar både som information och om bilden av någon anledning inte skulle laddas. Den högra bilden har ett litet script, som gör att länktexten hamnar nere i statusfältet, alltså den textrad längst ner i webläsaren, där alla länktexter visas. Du måste ha valt att visa statusraden för att detta skall fungera och metoden är i det här fallet sämre än den till vänster. Men vi skall återkomma till script-metoden i avsnittet om bildkartor. Först dock något lite annat.

3. Thumbnails

Om du inte vill visa alla bilder i ett dokument (det tar ju lång tid att ladda ner) och inte bara vill visa en bildtext, kan du lägga in små kopior, s.k "thumbnails" av bilderna. På så vis ser besökaren vad det är för bild och kan välja att klicka på den för att få upp den verkliga bilden. Thumbnails kan du skapa på lite olika sätt:

Det bästa är att göra en liten kopia i ett bildredigeringsprogram. Gör kopian med färre färger och sämre upplösning, så sparar du mycket plats. Lägg in den lilla bilden som en klickbar bild och länka till en ny HTML-sida, där den riktiga bilden ligger.

Exempel: Jag har ett stort antal bilder av sällsamma varelser från havens djup, som jag vill visa. Men att lägga in alla bilder direkt på sidan gör den omöjlig att ladda ner för den vanlige besökaren. Därför skapar jag "thumbnails" av alla bilder och resultatet ser ut ungefär så här (bortsett från att jag här har använt samma bild av platssparande skäl!):

När du klickar på en av de små bilderna öppnas en länk till en större variant av den. Du behöver alltså inte skapa ett särskilt HTML-dokument för varje ny länk, utan kan länka till bilden direkt. Så här ser koden ut:

Ett annat, men mindre lyckat sätt, är att manipulera originalbildens mått, genom att använda för små width- och height-värden. Visserligen syns då små versioner av bilderna, men hela originalbilden måste då laddas ner innan "tumnageln" syns. Och det sparar alltså ingen tid åt besökaren. Möjligen sparar det lite plats åt dig, som slipper lägga upp två versioner av varje bild.

Dessutom riskerar bilden att se förvrängd ut om du manipulerar den på det här sättet. En tredje nackdel är att de flesta inte har större cacheminne än 32Kb per Mb i RAM-minne (=1.024 Kb cache för 32 Mb i RAM), vilket betyder att du definitivt inte bör använda denna metod om du har väldigt många eller stora bilder. Besökarens minneskapacitet äts då snabbt upp och din sida upplevs som trög och långsam.

4. Bildkartor (image maps)

Bildkartor, eller "image maps" som de också brukar kallas, är en variant av klickbara bilder och innebär att du kan låta olika delar av bilden, så kallade hot spots länka till olika ställen. Denna funktion kräver att du definierar dessa 'heta' områden i bilden och det görs med hjälp av HTML-kod.

Det finns två sätt att använda bildkartor: ett gammalt och ett nytt. Det gamla sättet innebär att man lägger upp instruktioner på servern (där man har sina HTML-dokument och bilder) om hur bildkartan skall fungera. Sådana bildkaror kallas för server-side. Detta sätt är idag i stort sett helt passé och används inte längre.

De flesta webläsare kan numera själva förstå och presentera bildkartor utan att få hjälp från servern. Sådana bildkartor kallas client-side och innebär alltså att varje klient - webläsare - själv tolkar bilderna och deras länkar.

Kommandona för den senare typen är dessa. Man kan skriva kommandona var man vill, förutom <IMG>, som måste stå där bildkartan skall placeras på sidan. Jag brukar skriva alla kommandona ihop, för att få en bättre överblick:

Vad betyder då det här?

IMG src="Bild.gif"

Detta är ju det vanliga kommandot för en bild, där 'Bild.gif' är bildens namn.

usemap="#Bild.gif"

Är kommandot som talar om för webläsaren att den skall starta en bildkarta med namnet "Bild.gif". Webläsaren är nu beredd att göra om bilden till en bildkarta och inväntar vidare order.

alt="Bildkartans alternativtext"

Bestämmer den text som skall visas som alternativ om besökaren har stängt av bildvisningen (eller har en webläsare som inte förstår bildkartor). Man kan också skriva in en alternativtext i varje del av bildkartan som skall vara klickbar, men jag gör sällan det då det ändå inte brukar synas. I stället visas texten för hela bildkartan. I stället använder jag scripts; se nedan.

MAP name="Bild.gif"

Detta kommando talar om för webläsaren att det är "Bild.gif" som skall vara bildkartan.

AREA shape="***"

Detta talar om vilken form de klickbara områdena på bilden har. De tre stjärnorna står för någon av:

RECT (=rectangle, fyrkant)
CIRCLE (=circle, cirkel)
POLY (=polygon, månghörning)

Det är lättast att använda rektanglar. Varför? Jo, nu skall du nämligen tala om för webläsaren vilka koordinater bildens klickbara områden skall ha:

coords="x,y,x,y"

Här gäller följande:

För en rektangel, RECT, måste du ange var hörnen på det klickbara området skall vara placerade. Raden x,y,x,y anger övre vänstra hörnets x,y-koordinater, respektive nedre högra hörnets x,y-koordinater.

Men hur vet man koordinaterna? Jo, genom att man använt ett bildredigeringsprogram och i det läst av koordinaterna för det område man vill ange som klickbart. Skriv in koordinaterna och använd kommatecken (inget mellanslag) för att skilja dem åt.

För en cirkel, CIRCLE, gäller lite andra koordinater, eftersom cirklar inte har fyra hörn. Med en x,y-kombination anger man cirkelns mittpunkt, och med en z-koordinat anger man cirkelns radie. Irriterande nog fungerar detta ändå inte alltid. Då kan man i stället för en z-koordinat pröva en x,y-koordinat istället.

Formen på en månghörning, POLY, bestämmer du själv och det klickbara området kan alltså ha hur många hörn som helst. Alla koordinater måste dock anges i den följd de kommer längs kanten på polygonen. Börja någonstans med ett x,y-värde och ange sedan alla nya hörn med x,y-koordinater. Avsluta i samma punkt du började, för att försluta området.

href="Länkens adress"

Här anges naturligtvis den adress länken skall leda till när man klickar på bilden!

AREA shape="default" nohref

Här anger man vad som skall hända om någon klickar utanför ett definierat område på kartan. Jag använder nohref för att det inte skall hända något, men man kan också ange en länkadress, om man vill att besökaren skall hamna på någon särskild plats.

/MAP

Avslutar image map-kommandot.

Här är ett exempel på en bildkarta (ej aktiverad) med samma kod som ovan:

Exempel på bildkarta

Koden:

Själva förfarandet är alltså inte särskilt märkvärdigt. Tänk dock på att inte använda för många bilder att inte lägga de klickbara områdena för tätt.

Man kan lägga in OnmouseOver-effekter för att göra bildkartan lite tydligare. I statusfältet syns då den text man har valt:

Exempel 2 på bildkarta

Koden:

Jag har här lagt scripten på var sin rad, eftersom man skall undvika att skriva dem så att det uppstår radbrytningar. Vill du lära dig mer om scripts skall du läsa mer på sidorna om JavaScript. Gå dit >

Vad gör man om inte bildkartan laddas? Låt oss anta att du har skrivit in en felaktig länkadress, eller att besökaren har stängt av bildvisningen. Då kommer det fortfarande att fungera i Netscape, som visar vilka områden i den "tomma" bilden som leder vidare, i synnerhet om du använder OnmouseOver-effekter. Men i Explorer fungerar det inte. Då kan man lägga in textlänkar under bildkartan. Det svåra är då naturligtvis att få det hela snyggt.

Den bild jag använt i exemplen är ju ganska okomplicerad och det kan finnas skäl till att man vill dela upp den i tre delar, som man sedan placerar i tre olika tabellceller, med cellspacing och cellpadding satta till noll. Fördelen är att man då slipper alla krångliga koder, som bildkartor kräver. En annan fördel är att tre små bilder i allmänhet laddas snabbare än en stor. Men det går naturligtvis inte att göra när man sysslar med mer komplicerade bildkartor.