Ez a bejegyzés bemutatja a kép megváltoztatásának folyamatát a JavaScriptben.
Hogyan változtassunk meg egy képet a Hover-en a JavaScriptben?
Az egérmutatón lévő kép megváltoztatásához használja a „ az egér felett ” esemény. Amikor az egeret/kurzort egy HTML-elemen vagy annak gyermekei között mozgatják, az onmouseover esemény aktiválódik.
1. példa: Kép módosítása az egérmutatón a JavaScriptben
Egy HTML-fájlban használja az címkét a kép megjelenítéséhez egy weboldalon. Csatolja a ' az egér felett ” esemény, amely meghívja a JavaScript függvényt, amikor az egeret a kép fölé viszi:
< img id = 'menuImg' src = '1.jpg' az egér felett = 'hover(ez);' />
Egy JavaScript fájlban adjon meg egy függvényt ' lebeg ' paraméterrel ' img ”. A definiált függvényben állítsa be az egérmutatón megjelenő képet:
funkció lebeg ( img )
{
img. src = '2.jpg'
}
Amint láthatja, a kimenetben, amikor az aktuális kép fölé húzzuk az egérmutatót, az hirtelen megváltozik:
2. példa: Kapcsolja be a képet az egérrel
A fenti példában a kép megváltozik, amikor az egeret a kép fölé viszi, és ugyanaz a kép marad. Ebben a példában az első kép újra megjelenik, amikor az egér kimozdul a képből. Ezt az effektust váltó effektusnak nevezzük. Erre a célra a „ az egér felett ” és „ on mouseout ” HTML tulajdonságai:
< img id = 'menuImg' src = '1.jpg' az egér felett = 'hover(ez);' on mouseout = 'hoverOut(this)' />
' az egér felett ' hívja a ' lebeg() ' funkció, míg a ' on mouseout ' esemény hívja a függvényt ' hoverOut() ”:
funkció hoverOut ( img ) {img. src = '1.jpg'
}
A kimenet azt mutatja, hogy a kép sikeresen megváltozott, amikor az egeret a kép fölé viszi, és megváltozik, amikor az egér kimegy a képből:
Ennyi volt a változó képről a lebegtetésen.
Következtetés
A lebegtetett kép megváltoztatásához használja a „ az egér felett ” esemény. A váltási effektushoz használja a „ az egér felett ' attribútum és ' on mouseout ” esemény. Amikor az egeret/kurzort egy elemen vagy annak gyermekei között mozgatják, az onmouseover esemény aktiválódik, míg ha az egeret/mutatót kimozdítják egy elemből, az onmouseout esemény történik. Ebben a bejegyzésben bemutattuk a kép megváltoztatásának folyamatát JavaScriptben.