Dette indlæg vil demonstrere proceduren for at ændre billedet ved svæv i JavaScript.
Hvordan ændrer man et billede på hover i JavaScript?
For at ændre billedet, når du svæver, skal du bruge ' over musen ' begivenhed. Når musen/markøren flyttes gennem et HTML-element eller et af dets underordnede elementer, udløses onmouseover-hændelsen.
Eksempel 1: Skift billede ved hover i JavaScript
I en HTML-fil skal du bruge -tagget til at vise billedet på en webside. Vedhæft ' over musen ” hændelse, der kalder JavaScript-funktionen, når musen svæver over billedet:
< img id = 'menuImg' src = '1.jpg' over musen = 'hover(dette);' />
I en JavaScript-fil skal du definere en funktion ' svæve ' med parameteren ' img ”. I den definerede funktion skal du indstille det billede, der skal vises på svæveren:
fungere svæve ( img )
{
img. src = '2.jpg'
}
Som du kan se, i outputtet, når vi svæver over det aktuelle billede, ændres det pludselig:
Eksempel 2: Skift billedet ved svæv
I ovenstående eksempel ændres billedet, når musen svæver over billedet, og det samme billede forbliver. Nu, i dette eksempel, vil det første billede dukke op igen, når musen bevæger sig ud af billedet. Denne effekt kaldes skifteeffekten. Til dette formål vil vi bruge ' over musen ' og ' onmouseout HTML-egenskaber:
< img id = 'menuImg' src = '1.jpg' over musen = 'hover(dette);' onmouseout = 'hoverOut(dette)' />
“ over musen ' kalder ' hover() '-funktion, mens ' onmouseout ' hændelse kalder funktionen ' hoverOut() ”:
fungere svæv ud ( img ) {img. src = '1.jpg'
}
Outputtet viser, at billedet er blevet ændret, når musen er over billedet, og det ændres, når musen går ud af billedet:
Det var alt om det skiftende billede på hover.
Konklusion
For at ændre billedet, når du svæver, skal du bruge ' over musen ' begivenhed. For at skifte effekt, brug ' over musen ' attribut med ' onmouseout ' begivenhed. Når musen/markøren flyttes gennem et element eller et af dets børn, udløses onmouseover-hændelsen, mens når musen/markøren flyttes ud af et element, sker onmouseout-hændelsen. I dette indlæg demonstrerede vi proceduren for at ændre billedet ved svæv i JavaScript.