Šajā ziņojumā tiks parādīta procedūra, kā mainīt attēlu, novietojot kursoru JavaScript.
Kā JavaScript nomainīt attēlu uz kursora?
Lai mainītu attēlu virs kursora, izmantojiet ' uzvediet peles kursoru ” pasākums. Kad pele/kursors tiek pārvietots caur HTML elementu vai vienu no tā atvasinājumiem, tiek aktivizēts notikums onmouseover.
1. piemērs: Mainiet attēlu, novietojot kursoru, izmantojot JavaScript
HTML failā izmantojiet tagu , lai rādītu attēlu tīmekļa lapā. Pievienojiet ' uzvediet peles kursoru ” notikums, kas izsauks JavaScript funkciju, kad pele tiks virzīta virs attēla:
< img id = 'menuImg' src = '1.jpg' uzvediet peles kursoru = 'virziet kursoru (šo);' />
JavaScript failā definējiet funkciju ' novietojiet kursoru ' ar parametru ' img ”. Definētajā funkcijā iestatiet attēlu, kas tiks rādīts uz kursora:
funkciju novietojiet kursoru ( img )
{
img. src = '2.jpg'
}
Kā redzat, izvadē, virzot kursoru virs pašreizējā attēla, tas pēkšņi mainās:
2. piemērs. Pārslēdziet attēlu, novietojot kursoru
Iepriekš minētajā piemērā attēls mainās, kad pele atrodas virs attēla, un paliek tas pats attēls. Tagad šajā piemērā pirmais attēls atkal parādīsies, kad pele tiks pārvietota no attēla. Šo efektu sauc par pārslēgšanas efektu. Šim nolūkam mēs izmantosim ' uzvediet peles kursoru ' un ' onmouseout ”HTML rekvizīti:
< img id = 'menuImg' src = '1.jpg' uzvediet peles kursoru = 'virziet kursoru (šo);' onmouseout = 'hoverOut(this)' />
' uzvediet peles kursoru ' sauc par' virzīt kursoru () ' funkcija, bet ' onmouseout 'notikums izsauc funkciju' hoverOut() ”:
funkciju hoverOut ( img ) {img. src = '1.jpg'
}
Izvade parāda, ka attēls ir veiksmīgi nomainīts, kad pele atrodas virs attēla, un tas tiek mainīts, kad pele iziet no attēla:
Tas viss bija saistīts ar mainīgo attēlu, novietojot kursoru.
Secinājums
Lai mainītu attēlu, novietojot kursoru, izmantojiet ' uzvediet peles kursoru ” pasākums. Lai pārslēgtu efektu, izmantojiet ' uzvediet peles kursoru ' atribūts ar ' onmouseout ” pasākums. Kad pele/kursors tiek pārvietots pa elementu vai vienu no tā atvasinājumiem, tiek aktivizēts notikums onmouseover, savukārt, kad pele/kursors tiek pārvietots no elementa, notiek onmouseout notikums. Šajā ziņojumā mēs parādījām procedūru attēla mainīšanai, turot kursoru JavaScript.