| <<< Förra avsnittet | Innehåll | Nästa avsnitt >>> |
Server-side imagemaps är den äldre varianten och fungerar så att uppgiften om var i bilden som användaren klickar skickas till ett speciellt imagemap-program på servern som omdirigerar webbläsaren till rätt sida. Server-side imagemaps kräver att du hämtar webbsidan från en server (det går alltså inte att testa sidan lokalt från din hårddisk) som har ett imagemap-program installerat (det brukar ingå i de flesta webbservrar).
Client-side imagemaps är en nyare metod som fungerar så att informationen om vilka ytor i bilden som är länkar till vilka sidor finns inbakad i HTML-filen och att det är webbläsaren som direkt avgör vilken sida som ska hämtas. Fördelarna med detta är att man slipper köra ett imagemap-program på servern, kommunikationen mellan server och klient blir lite effektivare och användaren ser dessutom direkt på statusraden vart en länk kommer leda (vid server-side imagemaps ser man bara de bild-koordinater som kommer att skickas till servern). Client-side imagemaps kan man också testa lokalt, eftersom de inte kräver att en server är inblandad.
Client-side imagemaps är modernare och smidigare och rekommenderas i de flesta fall. Netscape stöder client-side imagemaps från och med version 2.0.
För att ange att en bild är en client-side imagemap använder man attributet USEMAP:
<IMG SRC="bilden.gif" USEMAP="#karta">Mappningsinformationen anges med styrkoderna <MAP> och <AREA>:
<MAP NAME="karta">Varje <MAP> tilldelas ett namn, i det här fallet "karta". Man anropar <MAP> från USEMAP med detta namn. Det får inte finnas flera <MAP> med samma namn i samma fil. Om anropet görs från en annan fil anges även filnamnet:
<AREA SHAPE="rect" COORDS="10, 10, 40, 50" HREF="url">
</MAP>
<IMG SRC="bilden.gif" USEMAP="mapfil.html#karta">USEMAP pekar på platsen där mappningsinformationen finns på samma sätt som en hypertextlänk inom ett dokument. Tänk på syntaxen <A HREF="#namn"> för att göra länken och <A NAME="namn"> för att markera målpunkten. På samma sätt pekar USEMAP på mappningsinformationen.
Varje yta i bilden som ska fungera som en länk skrivs som en <AREA>-kod mellan <MAP> och </MAP>. Till varje <AREA>-kod anger man attributen SHAPE (som specifierar vilken form ytan ska ha), COORDS (som specifierar de koordinater som ytan har), HREF (som specifierar den webbadress som länken ska leda till), NOHREF (som anges om ytan inte ska fungera som länk) och ALT (som åstadkommer en alternativ text för textbaserade webbläsare).
Möjliga värden för SHAPE är rect (den aktiva ytan blir en rektangel), poly (den aktiva ytan blir en månghörning), circle (den aktiva ytan blir en cirkel) eller default (anger att den yta som ligger utanför de andra, definierade ytorna ska vara aktiv). Om man inte anger SHAPE antas SHAPE="rect".
Koordinaterna anges med COORDS="a, b, c, d, ...". Värdena räknas i pixlar och koordinaterna (0,0) ligger i bildens övre vänstra hörn. För en rektangel anges koordinaterna som "vänster, överkant, höger, underkant" (ett tal var). För en cirkel anges koordinaterna som mittpunktens x- och y-värde (två tal) samt radiens längd (ett tal). För en månghörning anges koordinaterna som parvisa x- och y-värden för varje av figurens hörn (x1, y1, x2, y2, ...).
Adressen till det länkade dokumentet anges med HREF="url" på samma sätt som i <A HREF>. Tänk på att en relativ adress kommer att tolkas relativt den fil som mappningsinformationen ligger i, inte den där själva bildreferensen finns. Om <IMG USEMAP> och <MAP> <AREA> </MAP> ligger i samma fil, eller i olika filer i samma mapp, blir detta samma sak.
Om den specificerade ytan inte ska fungera som länk skriver man NOHREF istället för HREF="url".
Det går att definiera hur många <AREA>-koder som helst. Om två ytor överlappar varandra kommer den som kommer först i listan gälla. En yta som inte definierats antas vara NOHREF, d.v.s. kommer inte fungera som länk.
| Kod | Visas som |
|---|---|
<IMG SRC="bilden.gif" USEMAP="#karta"> <MAP NAME="karta"> <AREA SHAPE="rect" COORDS="4,4,42,42" HREF="/" ALT="Förstasidan"> <AREA SHAPE="circle" COORDS="114,37,34" NOHREF> <AREA SHAPE="poly" COORDS="225,4,244,42,206,42" HREF="mailto:info@unisource.se" ALT="Skicka oss ett brev!"> <AREA SHAPE="default" HREF="avsn23.html" ALT="Nästa avsnitt"> </MAP> |
|
<AREA>-koderna kan man antingen skapa i en speciell map-editor (som till exempel Map This! för PC eller WebMap för Macintosh) eller skriva för hand. Vissa HTML-editorer har även denna funktion inbyggd. Om du skriver <AREA>-koderna för hand kan du hitta koordinaterna för de länkade ytorna genom att först skriva länken som en server-side imagemap (se nedan), titta på webbsidan och notera de koordinatpar som visas i Netscapes statusrad (längst ner i fönstret).
<A HREF="/cgi-bin/imagemap/kaka/allan.map"><IMG SRC> visar vad bildfilen heter, och som attribut till IMG anges ISMAP. Eftersom bilden fungerar som länk så får man en blå ram runt den. Vill man inte ha en blå ram anges BORDER="0".
<IMG SRC="allan.gif" ISMAP BORDER="0"> </A>
Hur .map-filen och länken i <A HREF>-koden skrivs beror på imagemap-programmet och vilken server som används. Det finns två vanliga sätt att göra det på; NCSA-style och CERN-style.
Läs mer om NCSA-style imagemaps här
Läs mer om CERN-style imagemaps här
<A HREF="/cgi-bin/imagemap/pic2.map">Då anger man mappningsinformationen både i en .map-fil och med styrkoderna <MAP> och <AREA>. Webbläsare som stöder client-side imagemaps kommer att använda informationen inom <MAP> och <AREA>, medan de som inte stöder client-side imagemaps kommer att använda .map-filen på servern.
<IMG SRC="/images/tech/pic2.gif" USEMAP="maps.html#map2" ISMAP>
</A>
| <<< Förra avsnittet | Innehåll | Nästa avsnitt >>> |