Ta objava bo prikazala postopek spreminjanja slike ob premikanju miške v JavaScriptu.
Kako spremeniti sliko ob lebdenju v JavaScriptu?
Za spreminjanje slike pri lebdenju uporabite » onmouseover ” dogodek. Ko se miška/kurzor premakne skozi element HTML ali enega od njegovih podrejenih elementov, se sproži dogodek onmouseover.
1. primer: Spremenite sliko ob lebdenju v JavaScriptu
V datoteki HTML uporabite oznako za prikaz slike na spletni strani. Priložite ' onmouseover ” dogodek, ki bo poklical funkcijo JavaScript, ko se miška pomakne nad sliko:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'lebdi(to);' />
V datoteki JavaScript definirajte funkcijo ' lebdeti ' s parametrom ' img ”. V definirani funkciji nastavite sliko, ki bo prikazana ob lebdenju:
funkcijo lebdeti ( img )
{
img. src = '2.jpg'
}
Kot lahko vidite, se v izhodu, ko premaknemo nad trenutno sliko, nenadoma spremeni:
2. primer: preklop slike pri lebdenju
V zgornjem primeru se slika spremeni, ko miško premaknete nad sliko, in ista slika ostane. V tem primeru se bo prva slika ponovno pojavila, ko se miška premakne iz slike. Ta učinek se imenuje preklopni učinek. V ta namen bomo uporabili » onmouseover « in » onmouseout Lastnosti HTML:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'lebdi(to);' onmouseout = 'hoverOut(to)' />
“ onmouseover ' kliče ' hover() ', medtem ko ' onmouseout ” dogodek pokliče funkcijo ” hoverOut() ”:
funkcijo hoverOut ( img ) {img. src = '1.jpg'
}
Izhod pokaže, da je slika uspešno spremenjena, ko je miška nad sliko, in da se spremeni, ko miška zapusti sliko:
To je bilo vse o spreminjanju slike ob lebdenju.
Zaključek
Za spreminjanje slike ob lebdenju uporabite » onmouseover ” dogodek. Za preklopni učinek uporabite » onmouseover »atribut z« onmouseout ” dogodek. Ko se miška/kurzor premakne skozi element ali enega od njegovih podrejenih elementov, se sproži dogodek onmouseover, medtem ko se miška/kazalec premakne iz elementa, nastopi dogodek onmouseout. V tej objavi smo prikazali postopek za spreminjanje slike ob lebdenju v JavaScriptu.