Tento príspevok demonštruje postup na zmenu obrázka pri umiestnení kurzora myši v JavaScripte.
Ako zmeniť obrázok pri umiestnení kurzora myši v JavaScripte?
Ak chcete zmeniť obrázok po umiestnení kurzora myši, použite „ onmouseover “udalosť. Keď sa myš/kurzor presunie cez prvok HTML alebo jeden z jeho potomkov, spustí sa udalosť onmouseover.
Príklad 1: Zmena obrázka pri umiestnení kurzora myši v JavaScripte
V súbore HTML použite značku na zobrazenie obrázka na webovej stránke. Pripojte „ onmouseover ” udalosť, ktorá zavolá funkciu JavaScript, keď myšou prejdete na obrázok:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'vznášať sa (toto);' />
V súbore JavaScript definujte funkciu „ vznášať sa “ s parametrom “ img “. V definovanej funkcii nastavte obrázok, ktorý sa zobrazí pri umiestnení kurzora myši:
funkciu vznášať sa ( img )
{
img. src = '2.jpg'
}
Ako môžete vidieť, vo výstupe, keď umiestnime kurzor myši na aktuálny obrázok, sa náhle zmení:
Príklad 2: Prepnite obrázok pri umiestnení kurzora myši
Vo vyššie uvedenom príklade sa obrázok zmení, keď myšou prejdete na obrázok, a zostane rovnaký obrázok. Teraz v tomto príklade sa prvý obrázok znova zobrazí, keď sa myš presunie z obrázka. Tento efekt sa nazýva prepínací efekt. Na tento účel použijeme „ onmouseover “ a „ onmouseout Vlastnosti HTML:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'vznášať sa (toto);' onmouseout = 'vznášať sa (toto)' />
“ onmouseover “ volá „ vznášať sa() funkcia “, zatiaľ čo funkcia “ onmouseout 'udalosť volá funkciu' vznášať sa() “:
funkciu vznášať sa ( img ) {img. src = '1.jpg'
}
Výstup ukazuje, že obrázok je úspešne zmenený, keď je myš nad obrázkom a zmení sa, keď myš odchádza z obrázka:
To bolo všetko o zmene obrazu pri vznášaní sa.
Záver
Ak chcete zmeniť obrázok pri umiestnení kurzora myši, použite „ onmouseover “udalosť. Pre efekt prepínania použite „ onmouseover “atribút s “ onmouseout “udalosť. Keď sa myš/kurzor presunie cez prvok alebo jeden z jeho potomkov, spustí sa udalosť onmouseover, zatiaľ čo keď sa myš/ukazovateľ presunie von z prvku, nastane udalosť onmouseout. V tomto príspevku sme demonštrovali postup zmeny obrázka pri prechode myšou v JavaScripte.