Autor Tema: objeto event javascript lista propiedades onmousemove coordenadas CU01160E (Leído 1787 veces)

paramonso · « **en:** 07 de Febrero 2018, 19:16 »

Hola. Dejo el ejercicio del tema CU01160E objeto event javascript lista propiedades type button target del curso básico de programación web de aprenderaprogramar.

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 onmousemove 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.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title>
		<meta charset="utf-8">

<script type="text/javascript">
window.onload = function() 
	{
		document.getElementById('cabecera').onmousemove=mouseXY;
		
		 
	}
function mouseXY(e)
	{
		//Les resto 430 y 120 para que nos de las coordenadas de la ventana
		//Sin restarles 430 y 120 nos daria las cordenadas de la pagina apartir de x=430 e y=120
		x = e.pageX-430;
		y = e.pageY-120; 
		document.getElementsByTagName('h1')[0].innerHTML = "Posición x : "+x +" - Posición y : "+y  ;
		
	//alert(x+"-"+y)
	}

</script>

</head>
<style type="text/css">
	body{
		background-color:red;
		text-align:center;
		}
	div{
		background:yellow;
		width:500px;
		height:400px;
		border:solid green;
		margin:1% auto;
		text-align:center;}
	h2{
		text-align:center;
		margin:35% auto;
		}
			 
</style>
<body>
	
		<h3>Ejemplo JavaScript</h3>
		<h1> Posición x:  - Posición y:</h1>
	<div id="cabecera"><h2>aprenderaprogramar.com</h2></div>
	

</body>

</html>

Hasta pronto.
Saludos.

Ogramar · « **Respuesta #1 en:** 16 de Junio 2018, 18:49 »

Buenas, el ejercicio está bien resuelto. No entiendo muy bien por qué le restas 430 y 120. A mí por ejemplo me salen en algunos casos coordenadas negativas. Una buena idea sería determinar como coordenadas (0,0) la esquina inferior izquierda del div, y hacer que se muestren las coordenadas a partir de ese punto. Por ejemplo, si estuviéramos en la esquina superior derecha del div debería mostrar (500, 400)

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: