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

Dans tout cet exercice, pour des raisons de simplicité, nous nous limiterons à un code standard (et donc non supporté par Internet Explorer). Pour une variante adaptée à IE, vous pouvez regarder un des exercices d'une précédente évaluation.

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.

Pour aller plus loin...

Retour au cours