Bilden ovan har två klickbara fält, den blå fyrkanten och den blå cirkeln, som öppnar varsitt fönster. (Om webbläsaren klarar javascript öppnas nya fönster om man klickar på bilderna i exemplet ovan). Så här skriver man för att göra fälten klickbara:
<IMG SRC = "bildfil1"
WIDTH = "pixel2"HEIGHT = "pixel3"BORDER = "04"USEMAP = "#flowsim5"><MAP NAME = "flowsim6">
<AREA7 HREF = "URL8"
ALT = "text som beskriver länken13"SHAPE = "rect9"COORDS = "vänster-x,topp-y,höger-x,botten-y10"><AREA HREF = "URL"
ALT = "text som beskriver länken13"SHAPE = "circle11"COORDS = "mittpunkts-x,mittpunkts-y,radie12"></MAP>
1 byt ut bildfil mot namnet på den bildfil du tänker använda, t ex bild1.gif
2 byt ut pixel mot bredden (i pixel) på den bild du tänker använda, i det här fallet 228
3 bildens höjd, i det här fallet 225
4 nollan tar bort den ram som klickbara bilder annars får
5 ett MAP-namn vilket som helst
6 MAP-namnet
7 en AREA-tagg för varje klickbart område; i det här exemplet används två AREA-taggar, en för kvadraten och en för cirkeln
8 t ex namnet på den HTML-fil du vill skall visas när man klickar
9 det klickbara områdets form, i det här fallet en rektangel(rect)
10 vänster-x och topp-y är alltså koordinaterna för fyrkantens övre vänstra hörn, i det här fallet 34 och 30
höger-x och botten y betecknar fyrkantens nedre högra hörn, i det här fallet 102 och 98
11 det klickbara områdets form, i det här fallet en cirkel (cirle)
12 cirkelns mittpunkt och radie, i det här fallet 154,153,42
13 text som ersätter bilden i webbläsare som inte visar bilder
Hur hittar man bredden, höjden och koordinaterna?
Öppna bildfilen i ett bildbehandlingsprogram och för muspekaren över bilden!
I Paint Shop Pro 5, t ex, kan man se bildens bredd och höjd till höger i fönstrets underkant (t ex 200 x 230).
Koordinaterna för den punkt där muspekaren just befinner sig syns till vänster i fönstrets underkant.
Koordinaterna för en fyrkantig yta hittar man alltså genom att placera musen i de aktuella hörnen - det övre vänstra hörnet och det nedre högra.)
Om bilden finns utlagd på nätet kan du också använda "koordinatvisaren" (den finns under rubriken bilder på delsidan till vänster) för att ta reda på koordinaterna för en bestämd punkt.
SÅ HÄR DEFINIERAS ALLTSÅ DE KLICKBARA YTORNA:
<AREA SHAPE = "circle"
COORDS = "mittpunkts-x,mittpunkts-y,radie"><AREA SHAPE = "rect"
COORDS = "
vänster-x,topp-y,höger-x,botten-y"><AREA SHAPE = "poly"
COORDS = "x1,y1,x2,y2,x3,y3,x4,y4...">Vill man göra hela bilden klickbar placerar man den helt enkelt mellan A-taggarna, t ex:
<A HREF = "mailto:ilj@flowsim.se"><IMG SRC = "bildfil" BORDER = "01"></A>
1 nollan tar bort den ram som klickbara bilder annars får
Med BORDER satt till 15 i stället för 0 skulle den klickbara bilden få en ram som är 15 pixel bred och se ut så här:
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 22 mars 2004.
Den här sidan hör hemma i ett ramsystem hos:
http://www.flowsim.se
Bilder på hemsidan