Dreamweaver

 skriv ut »

Imagemaps - hot spots
Klickbara områden i en bild

Länkar från text eller bilder sker ju genom att märket <A HREF> omger texten eller bilden som ska länkas:

<a href="webbsida.php"><img src="bild.gif"></a>
<a href="webbsida.php">klicka här-text</a>

I vissa lägen vill man att en del av en bild ska vara klickbar och inte hela bilden i sig. Ett av de vanligaste exemplen är förmodligen gruppbilder, klassfotografier etc där enskilda personer ska vara klickbara. Lösningen heter Imagemaps (kallas även Hot spots) och är ett klickbart område angivet i X- och Y-koordinater.

I övningen använder vi ett annat exempel när Imagemaps är användbart, klickbara områden i kartor. Bilden ovan har ett Imagemap-område som ser ut så här:

<area shape="poly" coords="145,222,150,212,156,212,158,200,166,202,176,202,185,
204,186,215,183,225,184,237,187,246,186,254,178,261,170,250,172,243,165,237,157,223">

Området består av ett stort antal koordinater eftersom det angivna området är en polygonform. I ett rektangulärt Imagemap-område finns det endast fyra koordinater, en för varje hörnpunkt.

Imagemaps finns i två varianter; Server-side och Client-side. I en Server-side Imagemap hämtas informationen om det klickbara området i en särskild fil på webbservern till skillnad från Client-side Imagemaps där all information finns i själva HTML-sidan och tolkas av webbläsaren. Det innebär i praktiken att Client-side Imagemaps är betydligt snabbare då de inte behöver anropa webbservern för varje besökare som klickar på länken utan allt går via webbläsaren. Dreamweaver har inga menyalternativ för Server-side Imagemaps utan du får själv ange dem i kodläget. Idag tolkar alla webbläsare Client-side Imagemaps som också är det vanligaste metoden.

Ange Client-side Imagemaps

I exemplet används Sverigekartan nedan. Högerklicka på bilden och spara den om du vill använda kartan själv:

1. Markera bilden och använd menyn "Properties" (Egenskaper) för att välja vilken typ av område du vill ange; Rektangulär, Oval eller Polygon. I exemplet passar en polygonform bäst för att markera länsgränserna:
   
   
   
2. Klicka ut polygonformen. Använder du Rektangel- eller Oval-formen kan du rita ut området.
   
   
   
3. Markera området med pekaren om du inte ser "Hotspot-properties" som nedan. Ange ett namn för Imagemap att användas som identifierare för de olika områdena. I övrigt har du samma alternativ som vid vanlig länkning (se mer i övningen "Länkar" »).
   
   
   
4. Om du behöver justera områdets storlek eller placering använder du "Pointer Hotspot Tool" (Hotspot-pekare). Du kan då också flytta området med precision genom att använda Piltangent och SHIFT+Piltangent.
   
   
   
   Då är det länkat och klart! Förgranska i webbläsare med F12 och testa länken.

HTML-koden:

Koden som utgör Imagemap-området anges på två ställen. Sökvägen till bilden med bredd- och höjdangivelser anges i koden där bilden är placerad med märket <IMG SRC> som vanligt. Attributet USEMAP anger vilken Imagemap som är kopplad till bilden och koordinaterna till det klickbara området anges i märket <MAP> långt ned i koden (före </BODY>).

Bilden med hänvisning till Imagemap med namnet "#gavleborg":

Imagemap med koordinater för "#gavleborg" anges i slutet av koden: