Le langage HTML permet de définir des zones sensibles, jouant le rôle de liens hypertextes, dans une image. Nous allons utiliser cette possibilité pour réaliser un test de géographie. Les zones sensibles d'une carte seront associées à une fonction JavaScript chargée de vérifier les réponses.
L' exemple donné ici vous fera retrouver certaines villes sur une carte de France.

1. Lorsque vous avez créé l'image que vous allez utiliser, il faut définir les zones qui seront sensibles. Votre logiciel d'affichage d'images vous permet de connaître les coordonnées de l'emplacement de la souris (avec IrfanView elles s'affichent sur la barre de titre lorsqu'on clique). Notez les coordonnées des zones sensibles. Elles dépendent de leur forme.
Pour un rectangle, ce sont les coordonnées des coins supérieur-gauche et inférieur-droit.
Pour un cercle, ce sont les coordonnées du centre et la valeur du rayon.
Pour un polygone, ce sont les coordonnées de ses sommets.

2. Il vous faut ensuite indiquer ces zones dans le fichier HTML. Cela se fait avec les balises <MAP> et <AREA>. Vous pouvez consultez le fichier d'aide sur les images pour revoir comment utiliser ces balises.

3. Chaque zone sensible est associée à une adresse URL par l'intermédiaire de la propriété HREF de la balise <AREA>. Nous utiliserons une adresse renvoyant à une fonction JavaScript. Dans l'exemple proposé, il s'agit de la fonction verif(n) où n est un numéro permettant d'identifier la zone sensible. Cela donne des instructions du type :

<AREA SHAPE="rect" COORDS="372,117,378,123"
HREF="javascript:verif(5)">


4. Il reste à écrire la fonction JavaScript verif(n). Pour cela il vous faudra établir une correspondance entre le numéro n fourni en paramètre et la bonne réponse. Dans l'exemple proposé on a utilisé un tableau contenant les noms de ville. Le numéro n correspond au rang de la ville dans le tableau. Une variable nommée "courant" contient pour sa part le numéro de la ville à montrer. On a ainsi une bonne réponse lorsque n et courant sont égaux.

Votre mission, si vous l'acceptez, consiste à réaliser un document html utilisant une image mappée dont les zones sensibles sont les réponses aux questions posées. Ce principe peut facilement s'appliquer à d'autres matières que la géographie.