Eventos onMouseOver y onMouseOut
Lección 38: Eventos onMouseOver y onMouseOut
Estos dos eventos tienen que ver con el ratón o mouse de nuestro ordenador. Funcionan de forma similar a los que hemos visto en la lección anterior. En este caso, un evento se ejecuta cuando el ratón está encima del componente en cuestión, y el otro cuando el ratón se sale del componente.
El ejemplo que vamos a realizar es un campo de texto, que cuando pongas el ratón encima se escriba la palabra "dentro" para saber que estamos dentro, y cuando el ratón se salga del campo de texto, aparezca el texto "fuera", y de esta forma entenderemos el funcionamiento de estos eventos.
La parte del HTML es la siguiente:
Un campo de texto, al cual le ponemos los 2 eventos del ratón. A cada uno de ellas le damos el nombre de una función; para el evento omMouseOver le damos la función "dentro()", y para el onMouseOut la de "fuera()".
Ya solo nos queda programar las funciones. Son muy sencillas, simplemente escribimos el texto "dentro" o "fuera" en la caja de texto. La parte javascript:
Como ya sabemos, para acceder al valor del campo de texto se hace:
document.getElementById('nombre').value
Así que a eso le asignamos el valor de una cadena "Dentro" o "Fuera", y ya tenemos todo listo.
El ejemplo aquí: Eventos del ratón
El funcionamiento de la aplicación:
