Récupérer la position de la souris

Comment connaitre la position de la souris dans la page

position souris javascript, javascript position souris, recuperer position souris javascript, recuperer position souris, javascript recuperer position souris, javascript souris, position souris, position javascript, javascript position, souris javascript, afficher position souris javascript, innerhtml, javascript souris position, recuperer position, javascript recuperer souris

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>