Appel d'un lien sur image

On peut aussi afficher une image et découper cette image en plusieurs zones, de telle sorte que la ressource appelée soit dépendante de la position du pointeur dans l'image.

Le texte suivant montre le découpage de l'image en plusieurs polygones.



   <html><head><title>Exemple HTML</title>

   </head>

   <body bgcolor=yellow link=red vlink=red>

   <h1>Essai de lien sur image</h1>

   <hr>

   <img src="img0001.gif" height=320 width=213 usemap="#voiles">



<!-- Description de la topologie de l'image -->

   <map name="voiles">

   <area shape=poly coords="74,0,76,61,65,179,131,209,135,0"

       href="Le_spinaker" alt="Le Spinaker">

   <area shape=poly coords="0,0,0,200,100,200,100,0"

       href="Le_ciel" alt="Le ciel">

   <area shape=poly

       coords="11,319,61,264,111,232,136,231,212,262,212,319"

       href="La_coque" alt="La coque">

   <area shape=poly coords="137,0,127,218,212,219,212,0"

       href="La_grand_voile" alt="La Grand voile">

   <area shape=default nohref>

   </map>



   </body></html>

Vos trouverez un exemple en http://www.mailhol.com/pub/ipso/v97_concepts/demomap.html

Cet exemple reprend le texte ci-dessus, mais prépare un tableau de 2 colonnes. Il place un texte explicatif dans la première colonne, puis l'image dans la seconde.

Les principaux éléments de cette image (coque, spi, grand voile, ciel) correspondent chacun à un appel différent. Le reste de l'image (la mer) ne correspond à aucun lien. Lorsque le pointeur la désine, il reprend sa forme habituelle.

L'exemple affiché vous permettra aussi de tester la conformité de votre fureteur avec la définition de HTML 3.2, car les ordres utilisés n'existaient pas en html 2.0.