WebKnutselaarsHulpjes
CSS buttons Diashow 1 Diashow 2 Imagemap JS-Klokje Kleuren Laadtijd Meta-tags Mouseover Popups 1 Popups 2 Popups 3 Textures Reactie Home
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>
