WebKnutselaarsHulpjes Webknutselaarshulpjes logo

WebKnutselaarsHulpjes

Zo blij  

Imagemap

Op dit plaatje (100 x 100) passen we onderstaand stukje code toe.
Klik op een letter, om te zien wat er gebeurd.

 
<IMG SRC="img/plaatje1.gif" USEMAP="#naam"
height="100" width="100" BORDER=0>
<MAP NAME="naam">
<AREA SHAPE=RECT COORDS="0, 0, 50, 50"
HREF="verwijzing1.html">
<AREA SHAPE=RECT COORDS="50, 0, 100, 50"
HREF="verwijzing2.html">
<AREA SHAPE=RECT COORDS="0, 50, 50, 100"
HREF="verwijzing3.html">
<AREA SHAPE=RECT COORDS="50, 50, 100, 100"
HREF="verwijzing4.html">
</MAP>

We maken als het ware een plattegrond van het plaatje,
SHAPE=RECT staat voor vorm=rechthoek en COORDS="0, 0, 50, 50" staat voor de coördinaten, 0,0 is linksboven en 50,50 is het midden van het plaatje. We tellen eerst van links dan van boven, vakje B is dus 50 van links 0 van boven en 100 van links 50 van boven.

Het kan ook met een popup venster:

 
<IMG SRC="img/fotos.jpg" USEMAP="#naam2"
height="140" width="196" BORDER=1>
<MAP NAME="naam2">
<AREA SHAPE=RECT COORDS="0, 0, 95, 70" HREF="#"
onClick="window.open('img/1.jpg','','width=620,height=440');
return false">
<AREA SHAPE=RECT COORDS="95, 0, 196, 70" HREF="#"
onClick="window.open('img/2.jpg','','width=620,height=440');
return false">
<AREA SHAPE=RECT COORDS="0, 70, 95, 140" HREF="#"
onClick="window.open('img/3.jpg','','width=620,height=440');
return false">
<AREA SHAPE=RECT COORDS="95, 70, 196, 140" HREF="#"
onClick="window.open('img/4.jpg','','width=620,height=440');
return false">
</MAP>

Divider

WebKnutselaarsHulpjesDisclaimer: de auteur van WebKnutselaarsHulpjes zal geen enkele aansprakelijkheid aanvaarden voor schadelijke gevolgen, lichamelijke klachten, slapeloze nachten, of enig ander gevolg van het gebruik van de hier getoonde voorbeelden.