Créer des images réactives

Le principe d'une image réactive est que certaines zones de l'image sont en fait associées à des liens hypertexte.

Pour créer une image réactive il faut préciser par une série de commandes les coordonnées des zones qui doivent "réagir".

La première tache consiste à créer une image avec des zones facilement identifiables (exprimées en pixels). Dans le code source de sa page web on place ensuite les balises :  <map name="nom"> ... </map>.

Entre ces deux balises, on indiquera autant de marqueurs <AREA> qu'il y a de zones sensibles à définir. Chacune de ces zones sera définie de la façon suivante :

<area shape="type de zone"
coords="liste des coordonnées, séparées par des virgules" 
href="adresse du lien où la zone devra renvoyer.html">

Le type de zone peut prendre la valeur

• rect pour un rectangle,
• circle pour un cercle,
• ou polygon pour un polygone.

Pour un rectangle, on définit les coordonnées des extrémités de la diagonale principale.
Pour un cercle, les coordonnées du centre suivies de la valeur du rayon.
Pour un polygone, les coordonnées des points successifs.

Vous pouvez visionner le code source de cette page en cliquant sur "Affichage > Source" et voir où sont placées les différentes balises de l'image "chateau.gif"