cf.geocities.com/willfonkam   

Un image mappée ou image réactive est une image composée de plusieurs zones permettant d'acceder à différentes pages d'un site. Pour créer une image mappée, on doit définir la forme et les coordonnées des zones sensibles.

Pour créer une image mappée, on se sert des balises <MAP> et <AREA> et ses attributs qu'on ajoute après avoir inséré l'image qu'on souhaite mapper. La balise <MAP> a un seul attribut: NAME. Les attributs de la balise <AREA> sont:

• SHAPE (Forme de la zone sensible)
• COORDS (Coordonnées de la zone)
• HREF (Lien de la zone)

1. SHAPE définit la forme de la zone. les valeurs possibles de SHAPE sont:
   1. "Rect" si la zone est rectangulaire
   2. "Circle" si elle est circulaire
   3. "Poly" si c'est un autre polygone

2. COORDS définit les coordonnées de la zone réactive.
   1. Si c'est un rectangle, les coordonnées sont: "abscisse sup gauche, ordonnée sup gauche, abscisse inf droit, ordonnée inf droit".
   2. Si c'est un cercle, les coordonnées sont: "abscisse centre, ordonnée centre, rayon"
   3. Si c'est un polygone ses coordonnées sont: "la suite des coordonnées séparées par des virgules".

<IMG SRC="images/image.gif" WIDTH=150 HEIGHT=70 USEMAP="#Map">

<MAP NAME="Map">
<AREA SHAPE="rect"
HREF="debut.html"
COORDS="0,0,48,28">

<AREA SHAPE="circle"
HREF="precedent.html"
COORDS="50,30,10">

<AREA SHAPE="poly"
HREF="suivant.html"
COORDS="60,50,80,30,100,40,50,100">

Exemple 1: <SHAPE = "rect">
Exemple pratique avec une forme rectangulaire:

COORDS = "coordonnée 1, coordonnée 2, coordonnée 3, coordonnée 4"

Exemple:

Pour cette image, les coordonnées de la zone 1 seront:

Coordonnées de la zone 1 : COORDS = "0,0,50,150"

Coordonnées de la zone 2 : COORDS = "0,0,100,150"

Coordonnées de la zone 3 : COORDS = "0,0,150,150"

Coordonnées de la zone 4 : COORDS = "0,0,200,72"

Coordonnées de la zone 5 : COORDS = "0,73,200,150"

Application: Cliquez sur les différentes zones et voyez les liens

Exemple 2: <SHAPE = "circle">
Exemple pratique avec une forme circulaire:

COORDS = "coordonnée 1, coordonnée 2, coordonnée 3"

PARTIQUE:

---

Les formulaires

Voir le prochain chapître ==>

Les Feuilles de Style

---

---