Ten post zademonstruje procedurę zmiany obrazu po najechaniu kursorem w JavaScript.
Jak zmienić obraz po najechaniu kursorem w JavaScript?
Aby zmienić obraz po najechaniu kursorem, użyj opcji „ najedź myszką ' wydarzenie. Kiedy mysz/kursor zostanie przesunięta przez element HTML lub jeden z jego elementów podrzędnych, wyzwalane jest zdarzenie onmouseover.
Przykład 1: Zmień obraz po najechaniu kursorem w JavaScript
W pliku HTML użyj tagu , aby wyświetlić obraz na stronie internetowej. Dołącz „ najedź myszką ”, które wywoła funkcję JavaScript po najechaniu myszką na obraz:
< identyfikator img = „menuImg” źródło = '1.jpg' najedź myszką = 'najedź (to);' />
W pliku JavaScript zdefiniuj funkcję „ unosić się ” z parametrem „ img ”. W zdefiniowanej funkcji ustaw obrazek, który będzie się wyświetlał po najechaniu:
funkcjonować unosić się ( img )
{
img. źródło = '2.jpg'
}
Jak widać, na wyjściu, kiedy najeżdżamy kursorem na bieżący obraz, nagle się zmienia:
Przykład 2: Przełącz obraz po najechaniu kursorem
W powyższym przykładzie obraz zmienia się, gdy kursor myszy znajduje się nad obrazem, i pozostaje ten sam obraz. Teraz, w tym przykładzie, pierwszy obraz pojawi się ponownie, gdy mysz wyjdzie poza obraz. Efekt ten nazywany jest efektem przełączania. W tym celu użyjemy „ najedź myszką ' oraz ' mysz „Właściwości HTML:
< identyfikator img = „menuImg” źródło = '1.jpg' najedź myszką = 'najedź (to);' mysz = 'hoverOut(to)' />
“ najedź myszką „wzywa” unosić się() ”, podczas gdy „ mysz „zdarzenie wywołuje funkcję” hoverOut() ”:
funkcjonować hoverOut ( img ) {img. źródło = '1.jpg'
}
Dane wyjściowe pokazują, że obraz został pomyślnie zmieniony, gdy wskaźnik myszy znajduje się nad obrazem, i jest zmieniany, gdy wskaźnik myszy wychodzi z obrazu:
To było wszystko o zmieniającym się obrazie po najechaniu myszką.
Wniosek
Aby zmienić obraz po najechaniu myszką, użyj opcji „ najedź myszką ' wydarzenie. Aby uzyskać efekt przełączania, użyj opcji „ najedź myszką ” atrybut z „ mysz ' wydarzenie. Gdy mysz/kursor zostanie przesunięty przez element lub jedno z jego elementów podrzędnych, wyzwalane jest zdarzenie onmouseover, natomiast gdy mysz/wskaźnik zostanie przesunięty poza element, wystąpi zdarzenie onmouseout. W tym poście zademonstrowaliśmy procedurę zmiany obrazu po najechaniu kursorem w JavaScript.