Cómo cambiar la imagen en Hover en JavaScript

En las páginas web, cambiar las imágenes en el efecto flotar es una tarea común. La tarea específica de alternar imágenes en el flotador se usa principalmente en páginas web. Para hacer esto, use los atributos HTML "el ratón por encima" y "en el mouseut"En JavaScript para activar funciones.

Esta publicación demostrará el procedimiento para cambiar la imagen en Hover en JavaScript.

Cómo cambiar una imagen en Hover en JavaScript?

Para cambiar la imagen en el flotador, use el "el ratón por encima" evento. Cuando el mouse/cursor se mueve a través de un elemento HTML o uno de sus hijos, se activa el evento en Mouseover.

Ejemplo 1: Cambie la imagen en el flotador en JavaScript
En un archivo HTML, use la etiqueta para mostrar la imagen en una página web. Adjunta "el ratón por encima"Evento que llamará a la función JavaScript cuando el mouse se cierne sobre la imagen:

En un archivo JavaScript, defina una función "flotar"Con el parámetro"img". En la función definida, establezca la imagen que se mostrará en el flotador:

Función Hover (IMG)

img.src = "2.JPG "

Como puede ver, en la salida, cuando pasamos el paso sobre la imagen actual, de repente cambia:

Ejemplo 2: Alternar la imagen en el flotador
En el ejemplo anterior, la imagen cambia cuando el mouse se flota sobre la imagen, y la misma imagen permanece. Ahora, en este ejemplo, la primera imagen reaparecerá cuando el mouse se mueva fuera de la imagen. Este efecto se llama efecto de alternativa. Para este propósito, usaremos el "el ratón por encima" y "en el mouseut"Propiedades HTML:

"el ratón por encima"Llama al"flotar()"Funciona mientras, el"en el mouseut"El evento llama a la función"hoverout ()":

function Hoverout (img)
img.src = "1.JPG "

La salida muestra que la imagen se cambia correctamente cuando el mouse está sobre la imagen y se cambia cuando el mouse sale de la imagen:

Eso se trataba de la imagen cambiante en el flotador.

Conclusión

Para cambiar la imagen en Hover, use el "el ratón por encima" evento. Para el efecto de alternativa, use el "el ratón por encima"Atributo con"en el mouseut" evento. Cuando el mouse/cursor se mueve a través de un elemento o uno de sus hijos, se activa el evento On Mouseover, mientras que cuando el mouse/puntero se mueve fuera de un elemento, se produce el evento On Mouseut. En esta publicación, demostramos el procedimiento para cambiar la imagen en Hover en JavaScript.