Esta publicación demostrará el procedimiento para cambiar la imagen al pasar el mouse en JavaScript.
¿Cómo cambiar una imagen al pasar el mouse en JavaScript?
Para cambiar la imagen al pasar el mouse, use el botón ' el ratón por encima ' evento. Cuando el mouse/cursor se mueve a través de un elemento HTML o uno de sus elementos secundarios, se activa el evento onmouseover.
Ejemplo 1: cambiar la imagen al pasar el mouse en JavaScript
En un archivo HTML, use la etiqueta para mostrar la imagen en una página web. Adjunta ' el ratón por encima ” que llamará a la función de JavaScript cuando el mouse se desplace sobre la imagen:
< ID de imagen = 'menuImg' origen = '1.jpg' el ratón por encima = 'flotar (esto);' />
En un archivo JavaScript, defina una función ' flotar ” con el parámetro “ imagen ”. En la función definida, configure la imagen que se mostrará al pasar el mouse:
función flotar ( imagen )
{
imagen origen = '2.jpg'
}
Como puede ver, en la salida, cuando pasamos el mouse sobre la imagen actual, cambia repentinamente:
Ejemplo 2: alternar la imagen al pasar el mouse
En el ejemplo anterior, la imagen cambia cuando el mouse se desplaza sobre la imagen y permanece la misma imagen. Ahora, en este ejemplo, la primera imagen reaparecerá cuando el mouse se mueva fuera de la imagen. Este efecto se denomina efecto de alternancia. Para ello, utilizaremos el “ el ratón por encima ' y ' fuera del ratón ” Propiedades HTML:
< ID de imagen = 'menuImg' origen = '1.jpg' el ratón por encima = 'flotar (esto);' fuera del ratón = 'hoverOut(esto)' />
“ el ratón por encima ” llama el “ flotar() ” función mientras que, el “ fuera del ratón ” evento llama a la función “ hoverOut() ”:
función hoverout ( imagen ) {imagen origen = '1.jpg'
}
El resultado muestra que la imagen se cambia con éxito cuando el mouse está sobre la imagen y se cambia cuando el mouse sale de la imagen:
Eso fue todo sobre la imagen cambiante al pasar el mouse.
Conclusión
Para cambiar la imagen al pasar el mouse, use el botón ' el ratón por encima ' evento. Para cambiar el efecto, use el botón “ el ratón por encima ” atributo con “ fuera del ratón ' evento. Cuando el mouse/cursor se mueve a través de un elemento o uno de sus elementos secundarios, se activa el evento onmouseover, mientras que cuando el mouse/puntero se mueve fuera de un elemento, se produce el evento onmouseout. En esta publicación, demostramos el procedimiento para cambiar la imagen al pasar el mouse en JavaScript.