Uppdated 1999-04-01

Image maps

Client-side | Exempel Image Map | Server-side |

Image maps är en bild som är uppdelad i flera klickbara ytor, så kallade 'hot spots', som länkar till andra Websidor. Denna funktion kräver att man först definerar dessa hot spots i ett bildredigerings program som kan visa koordinaterna. Man kan även använda sig av program som man skapar image maps med eller skapar image maps dokumentet i ett program som till för att skapa just sådda klickbara ytor på bilder, tycker att programmet LiveImage är ett av de bättre för detta ändamålet.

Det finns två typer av image maps, server-side och client-side,
server-side, är den som är krångligast eftersom det kräver att det körs ett script på din web server som man anropar på sidan där image maps ligger samt att man måste vara on-line för att funktionen skall fungera.

Den andra varianten, clinet-side , innebär att det är Browsen själv som tolkar image maps och presenterar den utan att få hjälp från serven. Detta sätt innebär att man lägger sin image map direkt i HTML-koden, samtliga taggar skrivs där man vill att image map skall ligga på sidan.

upp

Client-side

Man börjar med de vanliga taggarna för att länka in en bild på sidan.

<IMG SRC="bild.gif" BORDER=0 WIDTH="400" HEIGHT="200" ALT="Image map" USEMAP="#bild">

USEMAP="#bild" Attributet talar om för browsen att bilden är en image map, använder sig av samma egenskaper som HREF attributet gör i <A>-taggen.
Brägården (#) talar om för Browsen att bilden som skall användas för image map ligger i HTML-dokumentet.

Tips! Se till att ha lite luft mellan de klickara områderna och att inte ha för många image maps på sidorna, eftersom det är tidkrävande att ladda bilder. Tips!


<MAP NAME="bild">

<AREA	SHAPE="rect"
	COORDS=x,y,x,y"
	TARGET=""
	HREF="länkens adress"
	ALT="Alternativ text till hot spoten">
<AREA 	SHAPE="default" NOHREF>
</MAP>

MAP NAME="bild.gif"
Kommandot som talar om för Browsen att det är filen "bild.gif" som skall var image map

AREA SHAPE=""
COORDS="x,y,x,y"
Vilken form de klickbara området på bilden har, finns tre olika former.

RECT= rectangle, (fyrkant)

Det är lättast att använda sig av fyrkanter som hot spot i imape maps eftersom man måste ange koordinaterna för de område som skall vara klickbart. COORDS="x,y,x,y"
x,y anger övre vänsta hörnets koordinat repektive nedre högra hörnets x,y-koordinat.

CIRCLE= circle, (cirkel)

För att ange de klickbara området för en cirkel, anger man en x,y-koordinat för cirkelens centrum,
och en z-koordinat för radien. Man bör nog byta ute z-koordinaten till en x,y-koordinat för radien
eftersom det inge funkerar ibland med z-koordinaten.

POLY= polygon, (månghörning)

Formen på månghörningen bestämmer du själv, för varje hörn som polygonen har
måste du även lägga upp en x,y-koordinat.
Avsluta i samma punkt som du började i för att försluta området.

TARGET=""
Går bra att anväda sig av i <ARE>-taggen, om man t ex använder sig av frames och vill styra
upp i vilken frame som den länkade sidan skall laddas i.

AREA SHAPE="default" NOHREF
Kommandot för att tala om för Browsen att inget skall hända om man klickar utanför de klickbara områderna, man kan även ange en länkadress.

De arear som blir klickbara kommer inte att bli markerade på någt sätt som visar att de är länkar som vid elementet <A>.

Exempel Image map

Har här nedan lagt upp ett exempel på en image map, har klippt ut en del från bilden
The Clinton Memorial och sedan lagt till två stycken textremser. Använder mig av de ritfunktioner som finns i FrontPage för att sätta hot spoten. (En del kod redigering efter)

Den ena är en 'ankarlänk' till toppen på denna sida, den andra öppnar inlednings sidan på denna HTML-kurs i ett nytt Browser fönster,
använder kommandot imagemap_out till attributet TARGET.
Förmodar att det har samma funktion som kommandot _blank, har inte hittat någon dokumentation om detta men efter test så ser det ut att fungera på samma sätt.

upp

Server-side

Server-side image maps är rätt så lätt att lägga upp, men det kräver att man har rätt access till tolknings scripten för image maps som ens Web server använder sig av.
Förut satt att din ISP har tolknings script för image maps.
Kontakta din/er ISP och höre efter med dem hur du/ni skall gör för att de skall fungera.
Det som skiljer sig i server-side från client-side är att <IMG>-taggen bäddas in i <A>-taggen och att attributet USEMAP byts ut mot ISMAP
Du måste även placera bilden i en länk till den tillhörande .map filen. Den exakta syntaxen för sciptet för map filen beror på din ISP´s image maps script.

Ett exempel på hur det skulle kunna se ute.

Några länkar angående Image map
MapEdit
LiveImage
Intro till Image map
Webcom Image map
Yahoo's sida med länkar om Imagemaps.

upp | startsidan | Föregående | nästa |