Autor Tema: JavaScript capturar coordenadas de puntero screenX screenY objeto event CU01160E (Leído 2701 veces)

Dimitar Stefanov · « **en:** 21 de Marzo 2016, 23:21 »

Buenas noches. A continuación voy a colgar una posible solución del ejercicio CU01160E del curso JavaScript desde cero.

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.

El código:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">
		
		
	function detectarMovimiento(){
		var div = document.getElementsByTagName('div');
		div[0].onmousemove = mostrarPosicion;
	}

	function mostrarPosicion(evobject){
		var screenX = evobject.screenX;
		var screenY = evobject.screenY;
		var spans = document.getElementsByTagName('span');
		spans[0].textContent = screenX+"px";
		spans[1].innerHTML = screenY+"px";
	}

	</script>
</head>
<body>
	<div style="width: 500px; height: 400px; border: solid; margin: 0;"  onmousemove="detectarMovimiento()">
		<h1>Posición X:<span></span> Posición Y:<span></span></h1>
	</div>
</body>
</html>

Gracias.

pedro,, · « **Respuesta #1 en:** 22 de Marzo 2016, 18:12 »

Buenas.

Veo todo muy bien.

Saludos.

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

Noticias:

Autor Tema: JavaScript capturar coordenadas de puntero screenX screenY objeto event CU01160E (Leído 2701 veces)

Dimitar Stefanov

JavaScript capturar coordenadas de puntero screenX screenY objeto event CU01160E

pedro,,

Re:CU01160E Objeto Event en JavaScript

Preguntas y respuestas

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

Noticias:

Autor Tema: JavaScript capturar coordenadas de puntero screenX screenY objeto event CU01160E (Leído 2701 veces)

Dimitar Stefanov

JavaScript capturar coordenadas de puntero screenX screenY objeto event CU01160E

pedro,,

Re:CU01160E Objeto Event en JavaScript

Preguntas y respuestas

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