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:
I begge eksempelene vil mapfila bestå av følgende elementer i angitt rekkefølge:
circle URL1 coords circle URL2 coords rect URL3 coords default URL4I 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.
Linja fra punktet P1 krysser 3 linjer, og er dermed inne i polygonet, mens linja fra P2 krysser 4 og er utenfor.