Come cambiare l'immagine su Hover in JavaScript

Nelle pagine Web, la modifica delle immagini sull'effetto hover è un compito comune. Il compito specifico di attivare le immagini sull'hover viene utilizzato principalmente su pagine Web. Per fare ciò, usa gli attributi HTML "onmouseover" E "onmouseout"In JavaScript per innescare le funzioni.

Questo post dimostrerà la procedura per modificare l'immagine su Hover in JavaScript.

Come cambiare un'immagine su Hover in JavaScript?

Per modificare l'immagine sull'hover, usa il “onmouseover"Evento. Quando il mouse/cursore viene spostato attraverso un elemento HTML o uno dei suoi figli, viene attivato l'evento OnMouseOver.

Esempio 1: Modifica l'immagine su Hover in JavaScript
In un file HTML, utilizzare il tag per mostrare l'immagine su una pagina Web. Allega il "onmouseover"Evento che chiamerà la funzione JavaScript quando il mouse si libra sull'immagine:

In un file JavaScript, definisci una funzione "molare"Con il parametro"img". Nella funzione definita, impostare l'immagine che verrà visualizzata su Hover:

funzione hover (IMG)

img.src = "2.jpg "

Come puoi vedere, nell'output, quando ci passiamo sull'immagine corrente, cambia improvvisamente:

Esempio 2: disattiva l'immagine su Hover
Nell'esempio sopra, l'immagine cambia quando il mouse si libra sull'immagine e la stessa immagine rimane. Ora, in questo esempio, la prima immagine riapparirà quando il mouse si sposta dall'immagine. Questo effetto è chiamato effetto attivato. A tale scopo, useremo il "onmouseover" E "onmouseout"Proprietà HTML:

"onmouseover"Chiama il"Hover ()"Funzione while, il"onmouseout"L'evento chiama la funzione"Hourout ()":

funzione hoverout (img)
img.src = "1.jpg "

L'output mostra che l'immagine viene modificata correttamente quando il mouse è sopra l'immagine e viene modificato quando il mouse uscirà dall'immagine:

Si trattava di l'immagine mutevole su Hover.

Conclusione

Per cambiare l'immagine su Hover, usa il “onmouseover"Evento. Per l'effetto di trasmissione, usa il “onmouseover"Attributo con"onmouseout"Evento. Quando il mouse/cursore viene spostato attraverso un elemento o uno dei suoi figli, viene attivato l'evento OnMouseOver, mentre quando il mouse/puntatore viene spostato da un elemento, si verifica l'evento onmouseout. In questo post, abbiamo dimostrato la procedura per cambiare l'immagine su Hover in JavaScript.