Mostrar Mensajes
1161
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Calcular coordenadas con JavaScript clientX y clientY event onmousemove CU01160E
« en: 12 de Noviembre 2015, 22:58 »
Hola, otro ejercicio más.
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.
Citar
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.
Código: [Seleccionar]
<!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.
, que la verdad es que le dí muchas vueltas.
RSS