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>
No hay comentarios:
Publicar un comentario