sábado, 30 de agosto de 2014

Tutorial Javascript parte 24 - Obtener la posición del cursor con onmousemove()




En esta parte del tutorial veremos como obtener la posición del cursor a través del evento onmousemove() y accediendo a las propiedades pageX y pageY del evento.

El evento onmousemove() permite detectar cuando el mouse se mueve.

La propiedad pageX permite obtener la coordenada X, que en este caso es lo mismo, que la posición left en píxeles del cursor.

La propiedad pageY permite obtener la coordenada Y, que en este caso es lo mismo, que la posición top en píxeles del cursor.

Codigo de ejemplo del capítulo ...

<!DOCTYPE HTML>
<html>
<head>

<script>
window.onload = function()
    {
  document.onmousemove = function(e)
    {
     var contenedor = document.getElementById("contenedor");
  contenedor.innerHTML = "Left: " + e.pageX + " " + "Top: " + e.pageY;
  contenedor.style.left = e.pageX + "px";
  contenedor.style.top = e.pageY + "px";
    }
 }
</script>

<style>
#contenedor
  {
   position: absolute;
  }
</style>

</head>
<body>
<div id="contenedor"></div>
</body>
</html>