See postitus demonstreerib JavaScriptis hõljuva pildi muutmise protseduuri.
Kuidas muuta pilti kursoril JavaScriptis?
Kursoril oleva pildi muutmiseks kasutage nuppu ' hiirega üle ” sündmus. Kui hiirt/kursorit liigutatakse läbi HTML-i elemendi või ühe selle alamosadest, käivitub sündmus onmouseover.
Näide 1: muutke pilti JavaScriptis hõljutades
HTML-failis kasutage pildi kuvamiseks veebilehel märgendit . Kinnitage ' hiirega üle ” sündmus, mis kutsub esile JavaScripti funktsiooni, kui hiir liigub pildi kohal:
< img id = 'menuImg' src = '1.jpg' hiirega üle = 'hover (see);' />
JavaScripti failis määrake funktsioon ' hõljuma ' parameetriga ' img ”. Määratletud funktsioonis määrake kursoril kuvatav pilt:
funktsiooni hõljuma ( img )
{
img. src = '2.jpg'
}
Nagu näete, muutub väljundis, kui hõljutame kursorit praeguse pildi kohal, järsku:
Näide 2: lülitage pilt kursoril sisse
Ülaltoodud näites pilt muutub, kui hiir liigub pildi kohal ja sama pilt jääb alles. Nüüd ilmub selles näites esimene pilt uuesti, kui hiir pildilt välja liigub. Seda efekti nimetatakse ümberlülitusefektiks. Sel eesmärgil kasutame ' hiirega üle ” ja „ hiirega väljas ”HTML-i atribuudid:
< img id = 'menuImg' src = '1.jpg' hiirega üle = 'hover (see);' hiirega väljas = 'hoverOut(this)' />
“ hiirega üle ' kutsub ' hõljuma() funktsioon, samas kui funktsioon ' hiirega väljas 'sündmus kutsub funktsiooni' hoverOut() ”:
funktsiooni hoverOut ( img ) {img. src = '1.jpg'
}
Väljund näitab, et pilti muudetakse edukalt, kui hiir on pildi kohal ja seda muudetakse siis, kui hiir läheb pildist välja:
See kõik puudutas hõljukil oleva pildi muutumist.
Järeldus
Kujutise muutmiseks hõljutades kasutage nuppu ' hiirega üle ” sündmus. Lülitusefekti jaoks kasutage nuppu ' hiirega üle ' atribuut koos ' hiirega väljas ” sündmus. Kui hiirt/kursorit liigutatakse läbi elemendi või ühe selle alamosadest, käivitub sündmus onmouseover, samas kui hiir/kursor liigutatakse elemendist välja, toimub sündmus onmouseout. Selles postituses demonstreerisime JavaScriptis hõljuva pildi muutmise protseduuri.