31 - Evento onmousemove



Problema:Disponer un título en una marca h1. Luego mostrar la coordenada del mouse cuando ingresa la flecha dentro del título. Verificar si la coordenada es respecto al título o respecto a la página.
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
    <link rel="stylesheet" href="estilos.css">
</head>

<body>
    <h1 id="titulo" onmousemove="mover(event)">Este es un título</h1>
    <p id="coordenadax">Coordenada X=</p>
    <p id="coordenaday">Coordenada Y=</p>
    <script src="funciones.js "></script>
</body>

</html>
#titulo {
  text-align:center;
  background:red;
}
function mover(e) {
    let corx = document.getElementById('coordenadax')
    let cory = document.getElementById('coordenaday')
    corx.innerText = 'Coordenada X=' + e.clientX
    cory.innerText = 'Coordenada Y=' + e.clientY
}
Ver solución


Retornar