Accueil    Codes    Position du curseur
 



Coordonnées du curseur  Coordonnées du curseur




Présentation



L'obtention des coordonnées de la souris se fait par l'utilisation du javascript. Ces coordonnées peuvent être récupérées sur toute la page ou sur un ou plusieurs éléments html spécifiques.

Le principe est de faire appel, soit sur la balise <body> du document soit sur des éléments spécifiques, à l'évènement "onmousemove" et de faire référence à une fonction javascript qui se chargera d'obtenir les valeurs et de les afficher dans un élément de la page html :



- Utilisation de l'évènement onmousemove :

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


- Code de la fonction javascript calculant et affichant les informations :

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;
   
}


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

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

Voici le résultat dans le document courant :



Position de la souris dans le document :