Dit bericht demonstreert de procedure om de afbeelding bij zweven in JavaScript te wijzigen.
Hoe verander ik een afbeelding op Hover in JavaScript?
Gebruik de ' onmouseover ' evenement. Wanneer de muis/cursor door een HTML-element of een van zijn onderliggende elementen wordt bewogen, wordt de gebeurtenis onmouseover geactiveerd.
Voorbeeld 1: Wijzig afbeelding bij zweven in JavaScript
Gebruik in een HTML-bestand de tag om de afbeelding op een webpagina weer te geven. Bevestig de ' onmouseover ”gebeurtenis die de JavaScript-functie aanroept wanneer de muis over de afbeelding beweegt:
< img-id = 'menuImg' src = '1.jpg' onmouseover = 'zweven (dit);' />
Definieer in een JavaScript-bestand een functie ' zweven ” met de parameter “ img ”. Stel in de gedefinieerde functie de afbeelding in die bij de zweeftekst wordt weergegeven:
functie zweven ( img )
{
img. src = '2.jpg'
}
Zoals je kunt zien, verandert de uitvoer plotseling wanneer we over de huidige afbeelding bewegen:
Voorbeeld 2: Schakel de afbeelding bij zweven
In het bovenstaande voorbeeld verandert de afbeelding wanneer de muis over de afbeelding beweegt en dezelfde afbeelding blijft staan. Nu, in dit voorbeeld, zal de eerste afbeelding opnieuw verschijnen wanneer de muis uit de afbeelding beweegt. Dit effect wordt het toggling-effect genoemd. Hiervoor gebruiken we de ' onmouseover ' en ' opmuisuit ”HTML-eigenschappen:
< img-id = 'menuImg' src = '1.jpg' onmouseover = 'zweven (dit);' opmuisuit = 'zweven naar buiten(dit)' />
“ onmouseover ” roept de “ zweven() ' functie terwijl de ' opmuisuit 'gebeurtenis roept de functie' hoverOut() ”:
functie hoverOut ( img ) {img. src = '1.jpg'
}
De uitvoer laat zien dat de afbeelding met succes is gewijzigd wanneer de muis zich boven de afbeelding bevindt en dat deze is gewijzigd wanneer de muis uit de afbeelding gaat:
Dat ging allemaal over het veranderende beeld bij het zweven.
Conclusie
Gebruik de ' onmouseover ' evenement. Gebruik voor het wisseleffect de ' onmouseover ” attribuut met “ opmuisuit ' evenement. Wanneer de muis/cursor door een element of een van zijn kinderen wordt bewogen, wordt de onmouseover-gebeurtenis geactiveerd, terwijl wanneer de muis/aanwijzer uit een element wordt bewogen, de onmouseout-gebeurtenis plaatsvindt. In dit bericht hebben we de procedure gedemonstreerd voor het wijzigen van de afbeelding bij zweven in JavaScript.