LES IMAGES REACTIVES

Une image réactive est une image divisée en plusieurs zones pointant vers différents documents. Prenons en exemple la carte d'une région affichant les départements qui la compose. Vous pouvez diviser cette carte en plusieurs zone (une par département). Ces zones vous enverrons par un lien vers une autre page du site (détail du département).

Il faut avant tout définir les zones de votre image ; pour cela vous allez devoir repérer les différentes coordonnées géométriques de chaque zone à exploiter. Il va donc falloir connaître les coordonnées en pixels de chaque zone de l'image qui va receler un lien vers un autre document. Pour cela vous allez utiliser un logiciel de traitement d'image tel que Paint Shop Pro ou si vous disposez d'un scanner du logiciel fourni avec.

Pour réaliser une image réactive les balises suivantes vont être utilisées :

<MAP NAME="zone"> cette balise définie votre image comme zone réactive.

<AREA> qui possède trois attributs :

SHARE="RECT" (indique une zone rectangulaire) ou SHARE="POLY"(indique une zone non rectangulaire).

COORDS="X1,Y1,X2,Y2,X…,Y…" indique les cordonnées de l'image,

HREF="lien" qui définit le lien de la zone

<IMG SRC="image_réacite" USEMAP="#nom">

Déterminer des zones rectangulaires.

Déterminer des zones non rectangulaires.

Pour étayer tout cela nous allons prendre en exemple une image composée de zones rectangulaires.

Exemple : Zone rectangulaire

Nous allons prendre les coordonnées des drapeaux afin de délimiter quatre zones.

Pour la France les coordonnées sont : 1,1 en haut à gauche et 47,33 en bas à droite.

Pour le Brésil les coordonnées sont : 47,1 en haut à gauche et 95,33 en bas à droite.

Pour l'Italie les coordonnées sont : 47,34 en haut à gauche et 95,70 en bas à droite.

Pour la Corée les coordonnées sont : 1,33 en haut à gauche et 47,70 en bas à droite.

Connaissant les coordonnées de votre image, vous voilà prêt à vous lancer dans la création d'une image réactive. Il ne reste plus qu'à entrer les balises HTML comme ci-dessous.

<HTML><HEAD><TITLE>Image réactive</TITLE>

<IMG SRC="Pays.jpg" USEMAP="#drapeau"> <MAP name="drapeau">

<AREA SHAPE=RECT COORDS="1,1,47,33" HREF="France.html" >

<AREA SHAPE=RECT COORDS="47,1,95,33" HREF="Brésil.html">

<AREA SHAPE=RECT COORDS="47,34,95,70" HREF="Corée.html">

<AREA SHAPE=RECT COORDS="1,33,47,70" HREF="Italie.html">

</MAP>

Pour les zones non rectangulaires le script est le même il faut juste remplacer RECT par POLY.

Exemple :
…
<AREA SHARE=POLY COORDS="1,1,47,33,95,70,1,33" HREF="lien.html">
…