Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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.
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:
<!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.
-
Buenas.
Veo todo muy bien.
Saludos. ;D