Ejercicio 11 - Eventos del mouse y el teclado
Tomando como base el siguiente archivo HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 11 - Información sobre eventos</title>
<style type="text/css">
body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>
<script type="text/javascript">
function muestraInformacion(mensaje) {
document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
for(var i=1; i<mensaje.length; i++) {
document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';
}
}
</script>
</head>
<body>
<div id="info"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
Completar el código JavaScript para que:
- Al mover el mouse en cualquier punto de la ventana del navegador, se muestre la posición del puntero respecto del navegador y respecto de la página:Para mostrar los mensajes, utilizar la función
Figura 1 Información que se muestra para los eventos del mousemuestraInformacion(). - Al pulsar cualquier tecla, el mensaje mostrado debe cambiar para indicar el nuevo evento y su información asociada:
Figura 2 Información que se muestra para los eventos del teclado - Añadir la siguiente característica al script: cuando se pulsa un botón del mouse, el color de fondo del cuadro de mensaje debe ser amarillo (
#FFFFCC) y cuando se pulsa una tecla, el color de fondo debe ser azul (#CCE6FF). Al volver a mover el mouse, el color de fondo vuelve a ser blanco.
Figura 3 El color de fondo del cuadro de información cambia en función del tipo de evento
Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it. Muskie Mount
ResponderBorrar