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
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).
|
|