w3.unpo<code>todo

La posición del ratón

Para obtener la posición del ratón encima de un elemento HTML cualquiera hemos creado la función oMousePos() que devuelve un objeto con las coordenadas x e y del ratón.
Esta función utiliza el método getBoundingClientRect().

function oMousePos(elemento, evt) {
  var ClientRect = elemento.getBoundingClientRect();
	return { //objeto
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
   }
}

También hemos escrito otras dos funciones:
marcarCoords() que da formato al div id="output" donde aparece el valor de las coordenadas x e y del ratón encima del elemento HTML.
Esta función utiliza la propiedad cssText que devuelve o establece el contenido de una hoja de estilo, pero si la utilizamos así: elemento.style.cssText devuelve o establece los estilos en línea de aquel elemento.

function marcarCoords(output, x, y) {
    output.innerHTML = ("x: " + x + ", y: " + y);
    var cssString = "";
    // el div id="output" esta a unos 10px del ratón;
    cssString += "top:" + (y + 10) + "px;";
    cssString += "left:" + (x + 10) + "px;";
    cssString += "visibility:visible;";
    output.style.cssText = cssString;
    testPosRaton.style.cursor = "pointer";
}

y limpiarCoords() que borra los estilos inline del <div id="output">.

function limpiarCoords(output) {
	output.style.cssText = "";
	testPosRaton.style.cursor = "default";
}

Utilizamos el método addEventListener() para detectar el movimiento del ratón ("mousemove") encima del div id="testPosRaton", y marcar las coordenadas con marcarCoords().

testPosRaton.addEventListener("mousemove", function(evt) {
		  var mousePos = oMousePos(testPosRaton, evt);
		  marcarCoords(output, mousePos.x, mousePos.y)
		}, false);

También utilizamos el método addEventListener() para registrar la salida del ratón ("mouseout") fuera del div id="testPosRaton", y borrar los estilos inline del div id="output" con limpiarCoords().

testPosRaton.addEventListener("mouseout", function(evt) {
		  limpiarCoords(output);
		}, false);

#container {
  position: relative;
  width: 250px;
  height: 220px;
  margin: 1em auto;
}

#testPosRaton {
  border: 1px solid #d9d9d9;
  width: 250px;
  height: 220px;
}

#output {
  position: absolute;
  padding: 5px;
  width: 100px;
  text-align: center;
  border: 1px solid #d9d9d9;
  background-color: #FFF;
  visibility:hidden;
}

        var testPosRaton = document.getElementById("testPosRaton");
		var output = document.getElementById("output");

		testPosRaton.addEventListener("mousemove", function(evt) {
		  var mousePos = oMousePos(testPosRaton, evt);
		  marcarCoords(output, mousePos.x, mousePos.y)
		}, false);

		testPosRaton.addEventListener("mouseout", function(evt) {
		  limpiarCoords(output);
		}, false);

		function marcarCoords(output, x, y) {
		  output.innerHTML = ("x: " + x + ", y: " + y);
		  var cssString = "";
		  // http://www.quirksmode.org/dom/w3c_css.html#t30
		  cssString += "top:" + (y + 10) + "px;";
		  cssString += "left:" + (x + 10) + "px;";
		  cssString += "visibility:visible;";
		  output.style.cssText = cssString;

		  testPosRaton.style.cursor = "pointer";
		}

		function limpiarCoords(output) {
		  output.style.cssText = "";
		  testPosRaton.style.cursor = "default";
		}

		function oMousePos(element, evt) {
		  var ClientRect = element.getBoundingClientRect();
		  return { //objeto
		    x: Math.round(evt.clientX - ClientRect.left),
		    y: Math.round(evt.clientY - ClientRect.top)
		  }
		}

Vea este ejemplo en codepen.io