Šis įrašas parodys, kaip pakeisti vaizdą užvedus pelės žymeklį „JavaScript“.
Kaip pakeisti vaizdą ant pelės žymeklio „JavaScript“?
Norėdami pakeisti vaizdą ant pelės žymeklio, naudokite „ užveskite pelės žymeklį “ renginys. Kai pelė / žymeklis perkeliamas per HTML elementą arba vieną iš jo antrinių elementų, suaktyvinamas įvykis onmouseover.
1 pavyzdys: Pakeiskite vaizdą užvedę pelės žymeklį naudodami „JavaScript“.
HTML faile naudokite žymą , kad vaizdas būtų rodomas tinklalapyje. Pridėkite ' užveskite pelės žymeklį “ įvykis, kuris iškvies „JavaScript“ funkciją, kai pelė bus nukreipta virš vaizdo:
< img id = 'menuImg' src = '1.jpg' užveskite pelės žymeklį = 'užveskite (tai);' />
„JavaScript“ faile apibrėžkite funkciją „ užveskite pelės žymeklį ' su parametru ' img “. Apibrėžtoje funkcijoje nustatykite vaizdą, kuris bus rodomas ant pelės žymeklio:
funkcija užveskite pelės žymeklį ( img )
{
img. src = '2.jpg'
}
Kaip matote, išvestyje, kai užvedame pelės žymeklį virš dabartinio vaizdo, jis staiga pasikeičia:
2 pavyzdys: perjunkite vaizdą ant pelės žymeklio
Aukščiau pateiktame pavyzdyje vaizdas pasikeičia, kai pelė užvedama virš vaizdo, ir išlieka tas pats vaizdas. Dabar, šiame pavyzdyje, pirmasis vaizdas vėl pasirodys, kai pele pajudės iš vaizdo. Šis efektas vadinamas perjungimo efektu. Šiuo tikslu mes naudosime „ užveskite pelės žymeklį “ ir „ ant pelės HTML ypatybės:
< img id = 'menuImg' src = '1.jpg' užveskite pelės žymeklį = 'užveskite (tai);' ant pelės = 'hoverOut(this)' />
“ užveskite pelės žymeklį “ vadina „ paleisti () “ funkcija, o “ ant pelės 'įvykis vadina funkciją' hoverOut () “:
funkcija hoverOut ( img ) {img. src = '1.jpg'
}
Išvestis rodo, kad vaizdas sėkmingai pakeičiamas, kai pelė yra virš vaizdo, ir pakeičiama, kai pele išeina iš vaizdo:
Tai buvo viskas apie besikeičiantį vaizdą ant pelės žymeklio.
Išvada
Norėdami pakeisti vaizdą laikant pelės žymeklį, naudokite „ užveskite pelės žymeklį “ renginys. Norėdami perjungti efektą, naudokite „ užveskite pelės žymeklį ' atributas su ' ant pelės “ renginys. Kai pelė / žymeklis perkeliamas per elementą arba vieną iš jo antrinių elementų, suaktyvinamas įvykis onmouseover, o kai pelė / žymeklis perkeliamas iš elemento, įvyksta įvykis onmouseout. Šiame įraše pademonstravome, kaip pakeisti vaizdą užvedus pelės žymeklį „JavaScript“.