Récupérer la position de la souris

Comment connaitre la position de la souris dans la page

position souris, javascript position souris, javascript souris position, position javascript souris, position javascript, javascript position, souris javascript, javascript souris, javascript recuperer position souris, javascript coordonnees souris, coordonnees souris javascript, javascript mouse position, mouse position javascript, not provided, scroll de souris javascript

Pour récupérer la position de la souris dans la page je vous vous propose la fonction getMousePosition :


/**
* @author Patrick Poulain
* @see http://petitchevalroux.net
* @licence GPL
*/
function getMousePosition(event)
{
	var e = event || window.event;
	var scroll = new Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);;
	return new Array(e.clientX + scroll[0] - document.body.clientLeft,e.clientY + scroll[1] - document.body.clientTop);
}

Article en relation : Position d'un élément dans la page

Pour utiliser cette fonction il est nécessaire sur certain navigateur de passer l'événement source de l'action. voici un petit exemple permettant d'afficher la position dans la souris dans une page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Position de la souris</title>
</head>
<body>
<script type="text/javascript">
function getMousePosition(event)
{
	var e = event || window.event;
	var scroll = new Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);;
	return new Array(e.clientX + scroll[0] - document.body.clientLeft,e.clientY + scroll[1] - document.body.clientTop);
}
</script>
<div id="mouseInfo" style="width:400px;height:300px;background:red"></div>
<script type="text/javascript">
var mouseInfo = document.getElementById('mouseInfo');
mouseInfo.onmousemove = function(event){
	var mouseInfo = document.getElementById('mouseInfo');
	var mousePosition = getMousePosition(event);
	mouseInfo.innerHTML = 'x:'+mousePosition[0] + 'y:'+mousePosition[1];
};
</script>
</body>
</html>