6-3 Images cliquables
6-3.2 "Client-side" Maps
USEMAP
La seconde manière consiste à gérer l'interaction entre l'utilisateur et l'image par le client. Netscape a introduit une nouvelle fonctionnalité dans la version 2.0 de son client qui permet de traiter l'interaction localement.
Le paramètre USEMAP se met à l'intérieur d'une commande IMG et indique au client que l'image en question est cliquable. La valeur du paramètre contient l'adresse d'une section MAP qui peut se trouver dans le même document (auquel cas on le déclare en commençant par #, e.g. "#nom_carte") ou dans un autre document ("URL#nom_de_carte"). Attention, la section MAP doit précéder la déclaration USEMAP dans le document.
Exemple:
<map name=pegmap>....</map> ..... <img src="pegase1.gif" USEMAP="#pegmap">
MAP & AREA
Le marqueur MAP sert à définir le début et la fin d'une section de définition de zones sensibles. Cette section contient une ou plusieurs commandes AREA. Nous avons déjà rencontré ce type de structure lorsque nous examinions les listes.
Exemple:
<MAP name="pegmap"> <AREA SHAPE="rect" COORDS="16,17,249,77" HREF="http://tecfa.unige.ch/ ~jermann/fashion.html"> <AREA SHAPE="rect" COORDS="16,91,249,213" HREF="http://tecfa.unige.ch/ welcome.html"> <AREA SHAPE="rect" COORDS="16,228,249,437" HREF="http://tecfa.unige.ch/ ~jermann"> </MAP>
Paramètres de AREA:
- SHAPE correspond à la forme de la zone sensible. Les valeurs possibles sont : RECT (rectangle), POLY (polygone ) et CIRCLE (cercle).
- COORDS indique les coordonnées en pixel pour définir la taille des zones. Le coin en haut à gauche de l'image est le point d'origine. Pour les rectangles, les coordonnées à spécifier sont le coin en haut à gauche et celui en bas à droite. Pour les cercles, les coordonnées du centre et la valeur du rayon sont nécessaires (3 nombres).
- HREF contient l'URL qui est chargé lorsque l'utilisateur clique sur une des zones sensibles.
Pour voir le résultat du code ci-dessus, reportez-vous à http://tecfa.unige.ch/guides/htmlman/imagemap-ex.html.