Hola, otro ejercicio más.
EJERCICIO
Crea un documento HTML que conste de un título h1 con el texto <<Posición x: - Posición y>>, y un div con ancho 500 px y alto 400 px. Utiliza el evento onmouseover para mostrar dinámicamente en el título h1 las coordenadas del puntero del ratón a medida que se desplaza por el elemento div.
Por ejemplo, cuando el usuario coloca el ratón sobre el div se deberá mostrar: Posición x: 244 Posición y: 188, al mover el ratón las coordenadas indicadas cambiarán a otro valor, por ejemplo Posición x: 322 Posición y: 228, y así sucesivamente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
#caja{border:solid 2px; width:500px; height:400px;}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('caja').onmouseover = mostrarPosicionPuntero;
}
function mostrarPosicionPuntero(eventoObj){
var posicionX = eventoObj.clientX;
var posicionY = eventoObj.clientY;
var nodoCoordenadas = document.getElementById('coordenadas');
nodoCoordenadas.innerHTML = 'Posicion x: ' + posicionX + ' - Posicion y: ' + posicionY;
}
</script>
</head>
<body>
<h1 id="coordenadas"> Posición x: - Posición y </h1>
<div id="caja"></div>
</body>
</html>Al usar
onmouseover, como pide el enunciado, no consigo que me muestre las coordenadas dinámicamente al desplazar el ratón sobre el elemento div, porque el evento
onmouseover solo se ejecuta cuando se coloca el ratón sobre el div, para que cambien las coordenadas, tengo que sacar el puntero del ratón fuera del div y luego volver a colocarlo sobre el div. No se si es eso lo que quiere el enunciado que se consiga. Sin embargo con el evento
onmousemove si conseguí que las coordenadas cambien dinámicamente según se desplaza el puntero por el div.
Saludos.
Tema: Calcular coordenadas con JavaScript clientX y clientY event onmousemove CU01160E (Leído 7833 veces)
RSS -
WAP2