Réaliser sa page Web
   Leçon 17 : Les images sensitives

La balise MAP

L'ancienne balise IMAGEMAP permettait d'appeler une page HTML différente suivant la région où l'on clique dans une image. L'inconvénient de cette directive, vient du fait que l'on devait créer sur le serveur, un fichier décrivant la géographie de chaque image. A chaque clic sur une zone de l'image, il fallait recontacter le serveur pour obtenir la page web associée. Difficile à maintenir pour un administrateur de site.

Netscape a mis en oeuvre une procédure MAP qui est gérée uniquement côté client. Procédure qui a été largement adoptée par tous les navigateurs. Elle simplifie donc la tâche des développeurs de page HTML.

La balise <MAP> permet de définir la géométrie de l'image; elle est nommée par une clause NAME et ce nom est ensuite utilisé dans une image insérée normalement par <IMG SRC="Nom de l'image" USEMAP="#Nom de la balise MAP">

A l'intérieur du bloc <MAP> </MAP> on trouve des définitions de type <AREA> définissant chacune des zones sensibles.

Ainsi la structure de la balise sera la suivante :

<MAP NAME="Nom">
<AREA SHAPE="valeur" COORDS="valeur_coordonnées" HREF="http//www.asi.fr">
<AREA SHAPE="valeur" COORDS="valeur_coordonnées" HREF="page2.htm">
......
</MAP>
<IMG SRC="Nom de l'image" USEMAP="#Nom">


Les différents paramètres prennent les valeurs suivantes :

  • SHAPE="rect", "circle", "poly" ou "default"
    • rect : corresponds aux coins opposés (par exemple "130,10,170,90")
    • circle : corresponds au centre et au rayon (par exemple "50,50,10")
    • poly : corresponds à une série de couple de points (par exemple "250,10 210,90 290,90")
    • default : est absent. Cette clause finale permet d'associer un lien au fond de l'image ou à toute zone non définie précédemment.
  • COORDS="xx,xx,xx..." : des valeurs entre guillemets, séparées par des virgules comme décrit précédemment.
  • HREF="fichier.htm" : le lien (interne ou externe) qui sera atteint après le clic.



Un petit exemple


Copier-coller ce texte


Qui donne :

    Cliquez sur l'un des boutons ci-dessous.
vous avez choisi l'option 1
vous avez choisi l'option 2
vous avez choisi l'option 3
vous visez vraiment très mal !!!






Un outil pour vous aider

Afin de réaliser facilement des images sensitives, je vous conseille d'utiliser un logiciel spécifique comme, par exemple, MapEdit.



Avec ce genre de logiciels, vous pourrez dessiner les contours cliquables directement avec la souris sur le dessin.

   On résume :
  • Prenez un outil qui calculera les coordonnées à votre place.
  • Les MAPS fonctionnent avec les tout type d'image (JPEG, GIF et GIF animés).