Efectos el ratón
Problema:
Conocer la posición del ratón en la pantalla para crar efectos del cursor
¿Es posible conocer la posición del ratón cuando se desaplaza por la página web?
Esto nos permite crear efectos como mostrar un aviso al hacer click o crear animaciones o imágnes que acompañen al cursor cuando se mueve.
Solución
La posición del ratón se puede consultar a leyendo propiedades del objeto event
Cuando movemos el ratón por la página web se dispara un evento mousemove. Este objeto event contiene toda la infomración sobre el ratón, incluída su posición.
La posición del ratón en la pantalla viene dada por una distancia horizontal al lado izquierdo y una vertical desde el borde superior. Ambas con cantidades en pixel
Esos valores se leen mediante las propiedades: event.clientY para la posición vertical y event.clientX para la posición horizontal. Están y referidas a la ventana del navegador.
Si queires referir estas corrdenadas al documento usa las propiedades event.pageX y event.pageY. Estas medidas incluyen el scroll si lo hubiera.
Ejemplo
Este ejemplo acompaña al ratón con una pequeña etiqueta indicando la posición x, y del cursor.
<div id="label" style="position:absolute"></div>
<script>
function posCursor(ev){
let px, py, cadena, obj;
obj = document.getElementById('label');
py = parseInt(ev.clientY);
px = parseInt(ev.clientX);
obj.innerHTML = "X: "+px+" Y: "+py;
obj.style.top = py+'px';
obj.style.left = px+'px';
}
</script>
El bloque div contendrá las corrdenadas X, Y del ratón respecto a la ventana del navegador.