Det finnes i utgangspunktet 2 metoder; client og server side image map. En beskrivelse av hva det dreier seg om kan finnes på HTML Goodies .

Resten av denne siden viser hvordan jeg har implementert server side image map. Ulempene med denne metoden er at må man kunne kjøre skript på serveren og ha et skript som virker (kanskje har din internett-leverandør et ferdig skript du kan bruke?). Den store fordelen er at den virker på alle browsere og skiptet kan evt gjøre mer enn bare å åpne en ny URL


Min løsning

Bildet under vises med HTML-koden:
<a href="stitilskriptet/mapimage.cgi?shapes.map"><img src="shapes.gif" alt="" ISMAP BORDER=0></a>
Klikk i bildet og se at det virker!

Når det klikkes i bildet, vil skriptet mapimage.cgi kalles opp med parameterene shapes.map og x og y koordinatene for punktet det klikkes på.(0,0 øverst til venstre) F.eks 77,76 midt i sirkelen. (I statuslinja vises ../mapimage.cgi?shapes.map?77,76)
shapes.map er ei fil som definerer områder i bildet som skal linkes til en URL. Her er det definert 3 områder; Sirkelen (circle), rektangelet (rect) og stjerna (poly). Alt utenfor disse er koplet til en default URL.

shapes.map ser slik ut:

rect http://home.no.net/oeborg/map/rect.html 149,81 270,146
circle http://home.no.net/oeborg/map/circ.html 77,76 103,97
poly http://home.no.net/oeborg/map/poly.html 76,218 59,273 104,240 149,273 132,217 175,183 121,182 103,126 88,181 32,182 75,217 75,217 75,217
default http://home.no.net/oeborg/map/default.html
					

Mapfila kan lages med f.eks MapEdit (Ikke lagre mappingen i html-fila, men bruk "eksport old server map" funksjonen), eller man kan lese av koordinatene i Paint, PaintShopPro eller hva man nå bruker for å lage bilder, og lage fila vha f.eks NotePad (minimalist løsningen).

Skriptets virkemåte

Skriptet mapimage.cgi leser mapfila (shapes.map) og avgjør så hvilke URL som skal kalles opp basert på koordinatene for punktet som ble klikket. Dersom det er definert overlappende områder, og klikkpunktet er innenfor alle, vil det området som er definert først i mapfila ha 1. prioritet. Flere områder kan godt kalle samme URL. Dette kan brukes til å lage mer komplekse former som vist her:

Map eksempel 1   Map eksempel 2

I begge eksempelene vil mapfila bestå av følgende elementer i angitt rekkefølge:

circle URL1 coords
circle URL2 coords
rect URL3 coords
default URL4
			    
I eks 1 er alle URL'ene forskjellige, mens URL1-3 er like i eks 2.

Metoder

Det er lett å avgjøre om et punkt er innenfor et rektangel. Det er bare å sjekke at x koordinatet for punktet er mellom minste og største x-verdi for rektangelet, og y koordinatet for punktet er mellom minste og største y-verdi for rektanglet. Med tall fra shapes.map:
(149 < x < 270) AND (81 < y < 146)

For en sirkel kan det testes at avstanden fra sentrum av sirkelen til punktet er mindre enn sirkelens radius. Igjen med med tall fra shapes.map:
sqrt((77-x)2+(76-y)2) < sqrt((77-103)2+(76-97)2)

For et polygon er det verre å finne ut om punktet er innenfor grensene. Ideen bak løsningen er følgende;
Trekk en linje fra punktet rett nedover til underkanten av bildet. Sjekk så hvor mange av linjene som utgjør polygonet som krysses. Dersom et odde antall linjer krysses, ligger punktet inne i polygonet.

Polygon metode

Linja fra punktet P1 krysser 3 linjer, og er dermed inne i polygonet, mens linja fra P2 krysser 4 og er utenfor.

Koden

Dersom du tror dette er noe du kan ha bruk for, kan kan du laste ned PERL skriptet MapImage.pl her.