Dette innlegget vil demonstrere fremgangsmåten for å endre bildet ved hover i JavaScript.
Hvordan endre et bilde på hover i JavaScript?
For å endre bildet på pekeren, bruk ' på musen over ' begivenhet. Når musen/markøren flyttes gjennom et HTML-element eller et av dets underordnede elementer, utløses onmouseover-hendelsen.
Eksempel 1: Endre bilde ved hover i JavaScript
I en HTML-fil bruker du -koden for å vise bildet på en nettside. Fest ' på musen over ”-hendelse som kaller opp JavaScript-funksjonen når musen holder musen over bildet:
< img id = 'menuImg' src = '1.jpg' på musen over = 'sveve(dette);' />
I en JavaScript-fil, definer en funksjon ' sveve ' med parameteren ' img '. I den definerte funksjonen, still inn bildet som skal vises på pekeren:
funksjon sveve ( img )
{
img. src = '2.jpg'
}
Som du kan se, i utdataene, når vi holder musepekeren over det gjeldende bildet, endres det plutselig:
Eksempel 2: Veksle mellom bildet ved å holde musepekeren
I eksemplet ovenfor endres bildet når musen holder musen over bildet, og det samme bildet forblir. Nå, i dette eksemplet, vil det første bildet dukke opp igjen når musen beveger seg ut av bildet. Denne effekten kalles veksleeffekten. For dette formålet vil vi bruke ' på musen over ' og ' onmouseout HTML-egenskaper:
< img id = 'menuImg' src = '1.jpg' på musen over = 'sveve(dette);' onmouseout = 'hoverOut(dette)' />
' på musen over ' kaller ' sveve() '-funksjonen mens ' onmouseout ' hendelse kaller funksjonen ' hoverOut() ':
funksjon sveve ut ( img ) {img. src = '1.jpg'
}
Utdataene viser at bildet er vellykket endret når musen er over bildet, og det endres når musen går ut av bildet:
Det var alt om det skiftende bildet ved sveving.
Konklusjon
For å endre bildet når du peker, bruk ' på musen over ' begivenhet. For å veksle effekt, bruk ' på musen over ' attributt med ' onmouseout ' begivenhet. Når musen/markøren flyttes gjennom et element eller et av dets barn, utløses onmouseover-hendelsen, mens når musen/pekeren flyttes ut av et element, skjer onmouseout-hendelsen. I dette innlegget demonstrerte vi prosedyren for å endre bildet ved sveving i JavaScript.