Images mapées
En final
Home

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 :

  1. On ajoute l'information pour le browser USEMAP="#cartons" dans la balise IMG de l'image.
  2. 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.