Gestion des événements à l'aide d'un event listener (2)

Affichage de coordonnées

1. Télécharger le fichier exo19vide.html.
2. Dans la fonction Init() :
   1. Identifier les deux cadres ;
   2. Ajouter un gestionnaire d'événement associé à l'événement mousemove, lançant la fonction dessine, appliqué à l'élément d'identifiant petitcadre.
3. Dans la fonction dessine, afficher une boîte d'alerte donnant les coordonnées du pointeur.

Tracé de dessin

A la place de la boîte d'alerte, nous allons lancer le dessin dans le calque d'identifiant grandcadre. Pour cela :

1. Créer un nouvel élément div ;
2. L'ajouter au grand cadre ;
3. La propriété de style position de cet élément vaut « absolute », sa classe est « point » ;
4. Son abscisse doit être égale à 3×(abscisse du pointeur-600), son ordonnée à 3×(ordonnée du pointeur-450).

Lever de crayon

... à ne pas confondre avec le planter de bâton...

Trouver un moyen afin que, lorsque l'on clique dans le petit cadre, on puisse à volonté abaisser ou suspendre le crayon dans le tracé dans le grand cadre.