Această postare va demonstra procedura de schimbare a imaginii la hover în JavaScript.
Cum se schimbă o imagine la Hover în JavaScript?
Pentru a schimba imaginea de pe hover, utilizați „ onmouseover ” eveniment. Când mouse-ul/cursorul este mutat printr-un element HTML sau unul dintre copiii acestuia, evenimentul onmouseover este declanșat.
Exemplul 1: Schimbați imaginea la trecerea cursorului în JavaScript
Într-un fișier HTML, utilizați eticheta pentru a afișa imaginea pe o pagină web. Atașați „ onmouseover ” eveniment care va apela funcția JavaScript atunci când mouse-ul trece peste imagine:
< id img = 'menuImg' src = „1.jpg” onmouseover = 'hover(acesta);' />
Într-un fișier JavaScript, definiți o funcție „ planare „cu parametrul „ img ”. În funcția definită, setați imaginea care va fi afișată pe hover:
funcţie planare ( img )
{
img. src = „2.jpg”
}
După cum puteți vedea, în ieșire, când trecem cu mouse-ul peste imaginea curentă, aceasta se schimbă brusc:
Exemplul 2: Comutați imaginea la Hover
În exemplul de mai sus, imaginea se schimbă atunci când mouse-ul trece peste imagine și rămâne aceeași imagine. Acum, în acest exemplu, prima imagine va reapărea când mouse-ul iese din imagine. Acest efect se numește efect de comutare. În acest scop, vom folosi „ onmouseover ' și ' onmouseout ” Proprietăți HTML:
< id img = 'menuImg' src = „1.jpg” onmouseover = 'hover(acesta);' onmouseout = „hoverOut(acest)” />
„ onmouseover ' numește ' planare() ” în timp ce funcția “ onmouseout „Evenimentul apelează funcția „ hoverOut() ”:
funcţie hoverOut ( img ) {img. src = „1.jpg”
}
Rezultatul arată că imaginea este schimbată cu succes când mouse-ul este peste imagine și este schimbată când mouse-ul iese din imagine:
Asta a fost totul despre imaginea în schimbare de pe hover.
Concluzie
Pentru a schimba imaginea la hover, utilizați „ onmouseover ” eveniment. Pentru efectul de comutare, utilizați „ onmouseover „atribut cu „ onmouseout ” eveniment. Când mouse-ul/cursorul este mutat printr-un element sau unul dintre copiii acestuia, evenimentul onmouseover este declanșat, în timp ce când mouse-ul/indicatorul este mutat dintr-un element, are loc evenimentul onmouseout. În această postare, am demonstrat procedura de schimbare a imaginii la hover în JavaScript.