Images mapées

Il ne nous reste plus qu'à inclure la map éditée avec MapThis dans
notre page Html.
Soit le fichier Html suivant :
<HTML>
<BODY>
<CENTER>
<IMG SRC="cubes.gif" HEIGHT=121 WIDTH=136>
</CENTER>
</BODY>
</HTML> |
Et la map de l'image "cubes.gif" :
|
<MAP NAME="cartons">
<AREA SHAPE=RECT COORDS="37,9,72,40" HREF="a.htm">
<AREA SHAPE=RECT COORDS="18,46,46,79" HREF="b.htm">
<AREA SHAPE=RECT COORDS="61,43,93,78" HREF="c.htm">
<AREA SHAPE=RECT COORDS="9,84,36,119" HREF="d.htm">
<AREA SHAPE=RECT COORDS="48,85,77,116" HREF="e.htm">
<AREA SHAPE=RECT COORDS="89,81,123,115" HREF="f.htm">
</MAP> |
Cette inclusion se réalise en deux temps :
- On ajoute l'information pour le browser USEMAP="#cartons" dans la
balise IMG de l'image.
- On inclus la map, n'importe où dans le fichier Html.
Le fichier final devient :
|
<HTML>
<BODY>
<CENTER>
<IMG SRC="cubes.gif" USEMAP="#cartons"
HEIGHT=121 WIDTH=136>
</CENTER>
<MAP NAME="cartons">
<AREA SHAPE=RECT COORDS="37,9,72,40" HREF="a.htm">
<AREA SHAPE=RECT COORDS="18,46,46,79" HREF="b.htm">
<AREA SHAPE=RECT COORDS="61,43,93,78" HREF="c.htm">
<AREA SHAPE=RECT COORDS="9,84,36,119" HREF="d.htm">
<AREA SHAPE=RECT COORDS="48,85,77,116" HREF="e.htm">
<AREA SHAPE=RECT COORDS="89,81,123,115" HREF="f.htm">
</MAP>
</BODY>
</HTML> |
Vous pouvez tester le résultat ci-après.


|