Bueno, antes de empezar comentaremos un poquito el objeto que vamos a utilizar, el objeto ‘event’.

El objeto ‘event’ representa el estado de un evento, así como el elemento en el cual el evento ocurre, el estado de las teclas, la posición del ratón y el estado de los botones del ratón.

El objeto evento está disponible solo el tiempo que dura el evento, es decir que puedes usarlo dentro del manejador de ese evento, pero no en cualquier otra parte del código.

NOTA: Para VBScript también tenemo este objeto, pero para invocarlo debemos de hacerlo a través del objeto ‘window’.

Y una vez que hemos visto esto por encima, vamos a pasar al ejemplo en sí.
Creamos una función que le vamos a pasar como parámetro el objeto event.

function position(event){
}

Dentro de esta función usaremos las propiedades ‘clientX’ y ‘clientY’ para sacar la posición del ratón relativa a la pantalla (excluyendo cualquier barra de herramientas o de scroll).

function position(event){
	var x = event.clientX;
	var y = event.clientY;
}

Ahora, si deseamos que se muestre tanto el valor X como el Y de la posición del ratón podemos crear un <div> en el que enviaremos el valor de X y de Y….

<div id="mousePositions">
</div>

…y continuaríamos dentro de nuestra función javascript en la que mediante DOM accederíamos al div.

	var mousePositions = document.getElementById('mousePositions');
	mousePositions.innerHTML = 'X coords: '+x+', Y coords: '+y;

Como opción podemos incluir un estilo CSS para el div:

#mousePositions{
	border:solid #000000 1px;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	height:300px;
	overflow:auto;
	width:150px;
}

Y echando un vistazo al código entero nos resulta:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#mousePositions{
	border:solid #000000 1px;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	height:300px;
	overflow:auto;
	width:150px;
}
</style>
<script language="javascript" type="text/javascript">
function position(event){
	var x = event.clientX;
	var y = event.clientY;
	var mousePositions = document.getElementById(’mousePositions’);
	mousePositions.innerHTML = ‘X coords: ‘+x+’, Y coords: ‘+y;
}
</script>
<title>MousePosition</title>
</head>
<body onmousemove="position(event);">
<div id="mousePositions">
</div>
</body>
</html>

Podeis ver un ejemplo online aquí. (Mover el ratón y observad como cambian los valores)