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:

38-1

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:

38-2

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:

Eventos del ratón

Daniel Pozo Chichon

Técnico en Desarrollo de Aplicaciones Informáticas (Grado superior)

Contenidos que te pueden interesar
Este sitio usa cookies para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Ninguna cookie será instalada a menos que se desplace exprésamente más de 400px. Leer nuestra Política de Privacidad y Política de Cookies. Las acepto | No quiero aprender cursos gratis. Sácame