Först så skapar vi en enkel klickbild:
<A HREF="http://www.zinden.com" TARGET=_BLANK"><IMG SRC="ros.gif"></A>
Det blir så här:
För att få bort ramen så skriver man:
<A HREF="http://www.zinden.com" TARGET=_BLANK"><IMG SRC="ros.gif" BORDER="0"></A>
Då blir det så här:
Klient-orienterade klickbilder
Det finns Server- och klient-orienterade klickbilder. Server-orienterade är så gammalt att vi lär oss
Klient-orienterade klickbilder.
Klickkänsliga områden och koordinater.
I en klient-orienterad klickbild kan vara rektangulära, cirkulära eller månghörniga.
Koordinaterna anges i x,y-par, där x står för en punkts horisontella koordinat.
y står för dess vertikala koordinat. De utgår från bildens övre vänstra hörn som har värdet 0,0.
Rektangel (rectangle eller rect) x1,y1,x2,y2 där x1,y1 är koordinaterna för övre vänstra hörnet.
Och x2,y2 är koordinaterna för det nedre högra hörnet.
Cirkel (circle eller circ) x,y,radie. Där x,y är koordinaterna för cirkelns mittpunkt.
Och radie är längden på cirkelns radie i pixlar.
Polygon (polygon eller poly) x1,y1,x2,y2....xN,yN. Där varje varje
x,y-par anger koordinaterna för ett hörn i tur och ordning.
Vilket hörn man börjar med har ingen betydelse.
Oval (oval) x1,y1 x2,y2. Där x1,y1 är koordinaterna för övre vänstra hörnet.
x2,y2 är koordinaterna för det nedre vänstra hörnet på en tänkt rektangel som omsluter ovalen.
Punkt (point) x,y. Där x,y är koordinaterna för en specifik punkt.
Används för att ange att en musklickning som inte träffar ett definierat område
ska aktivera närmaste "punkt"
Hur ser koden ut?
Den kan t ex se ut så här:
<IMG SRC="bilden.jpg" BORDER="0" USEMAP="#meny">
<MAP NAME="meny">
<AREA SHAPE="rect" COORDS="6,10 113,89" HREF="intro.html" ALT="introt">
<AREA SHAPE="rect" COORDS="216,14 306,100" HREF="norge.html" ALT="Norska sidan">
<AREA SHAPE="rect" COORDS="113,52 213,138" HREF="tomten.html" ALT="Info om tomten">
</MAP>
Det finns olika sätt att få reda på koordinaterna i en bild. Det bästa är att använda ett program.
t ex Mapedit
Eller använda din webbläsare.
skapa en fejkad server-orienterad klickbildslänk för en bild.
<A HREF="inget"><IMG SRC="bild.gif" ISMAP></A>
När du sedan pekar på en viss punkt i bilden på webbsidan, visas punktens koordinater
i webbläsarens statusfält.
