Accueil    HTML    Evenement onmousemove
 



Evenement onmousemove  HTML Evenement onmousemove : déplacement de la souris sur une balise html

«  Partie précédente  |  Index  |  Partie suivante  »


L'évènement onmousemove est lié au déplacement de la souris.
La position de la souris fonctionne sur un système de coordonnées :
    - une notion d'abscisse qui correspond à la position horizontale du curseur dans la page
    - une notion d'ordonnée qui correspond à la position verticale du curseur dans la page
    - l'origine (où x=0 et y=0) correspond au coin superieur gauche de la page.

Cette action est déclenchée dès que le curseur est déplacé dans le document html. Elle est pratique pour déterminer le positionnement du curseur de la souris et effectuer des modifications visuelles en fonction de la zone graphique ou se trouve le curseur.

Enfin il est également pratique et parfois plus facile d'utiliser les évènements onmouseover et onmouseout pour arriver à gérer les déplacements du curseur de la souris.



Exemple d'utilisation pour l'évènement onmousemove :





Déclaration de l'évènement onmousemove au niveau de la balise body du document appelant une fonction javascript :

<body onmousemove="positionSouris(event);">
...

Affichage du résultat dans un élément div :

<div id="divPosition"
   style="border:solid 1px black; width:220px; height:100px; padding:10px;">
</div>


Code de la fonction javascript affichant les informations à placer dans la partie head :

function positionSouris(event) {
   var posX;
   var posY;
   posX = event.clientX;
   posY = event.clientY;
   document.getElementById('divPosition').innerHTML =
            'Coordonnées de la souris :
X = ' + posX + '
Y = ' + posY;
   
}



Position de la souris dans le document :