Image map

Imagemaps zijn afbeeldingen waarbij de gebruiker door met de muis op een detail te klikken een hyperlink activeert.

Een voorbeeld
De code bevat een aantal onderdelen:

Om te beginnen de tags <map> </map>
de naam van de kaart <map name="...">
de vorm van de aan te klikken plaats, rond of vierkant shape=".."
de coördinaten op de afbeelding waar de link actief moet zijn.. coords="x1,y1,x2,y2" ..De regel bevat o.a. 4 coordinaten die de positie op de afbeelding bepalen,
x1, linker bovenhoek, pixels van links
y1, linker bovenhoek, pixels van boven
x2, rechter benedenhoek, pixels van links
y2, rechter benedenhoek, pixels van boven

De vorm wordt bepaald door de 'tag' shape="rect", shape="circle", shape="plygon"
en de naam van de afbeelding

De regel gaat er zo iets uitzien:

<img src="file://Q:/sites/default/files/images/imagemap01_1000.jpg" USEMAP="#imagemap01_1000" BORDER=0> <map name="imagemap01_1000"> <area name="bernissepad" shape="circle" coords="696,310,68" href="http://www.bernissepad.nl" alt="bernissepad" OnMouseOver="window.status='bernissepad'; return true" OnMouseOut="window.status=''; return true" target="_blank"> <area shape="default" href="http://www.cursusinternet.com" target="New Browser Window (target="_blank")"> </map>

Klik op de rode stippen om de link naar een andere website te openen...