Hvordan du endrer bilde på svevet i JavaScript

På websider er det en vanlig oppgave å endre bilder på svevetffekten. Den spesifikke oppgaven med å slå bilder på svevet brukes stort sett på websider. For å gjøre dette, bruk HTML -attributtene “onmouseover”Og“Onmouseout”I JavaScript for å utløse funksjoner.

Dette innlegget vil demonstrere prosedyren for å endre bildet på Hover i JavaScript.

Hvordan du endrer et bilde på svevet i JavaScript?

For å endre bildet på svevet, bruk "onmouseover" begivenhet. Når musen/markøren flyttes gjennom et HTML -element eller et av barna, utløses onmouseover -hendelsen.

Eksempel 1: Endre bilde på svevet i JavaScript
I en HTML -fil, bruk taggen til å vise bildet på en webside. Fest “onmouseover”Hendelse som vil kalle JavaScript -funksjonen når musen svever over bildet:

I en JavaScript -fil, definer en funksjon "sveve”Med parameteren”img”. I den definerte funksjonen, sett bildet som vil bli vist på svevet:

funksjon Hover (IMG)

img.src = "2.JPG "

Som du kan se, i utgangen, når vi svever over det nåværende bildet, endres det plutselig:

Eksempel 2: Veksle bildet på svevet
I eksemplet ovenfor endres bildet når musen svever over bildet, og det samme bildet gjenstår. Nå, i dette eksemplet, vil det første bildet dukke opp igjen når musen beveger seg ut av bildet. Denne effekten kalles den vekslende effekten. For dette formålet vil vi bruke “onmouseover”Og“Onmouseout”HTML -egenskaper:

“onmouseover”Ringer“sveve()”Funksjon mens,“Onmouseout”Hendelse kaller funksjonen”hoverout ()”:

funksjon hoverout (img)
img.src = "1.JPG "

Utgangen viser at bildet blir endret når musen er over bildet og det endres når musen går ut av bildet:

Det handlet om det skiftende bildet på svevet.

Konklusjon

For å endre bildet på Hover, bruk "onmouseover" begivenhet. For å bytte effekt, bruk "onmouseover”Attributt med“Onmouseout" begivenhet. Når musen/markøren flyttes gjennom et element eller et av barna, utløses onmouseover -hendelsen, mens når musen/pekeren blir flyttet ut av et element, oppstår onmouseout -hendelsen. I dette innlegget demonstrerte vi prosedyren for å endre bildet på svevet i JavaScript.