Tämä viesti esittelee toimenpiteen kuvan vaihtamiseksi hiirellä JavaScriptissä.
Kuinka vaihtaa kuvaa Hoverissa JavaScriptissä?
Jos haluat vaihtaa hiiren osoittimessa olevan kuvan, käytä ' hiiren päällä ' tapahtuma. Kun hiirtä/kohdistinta siirretään HTML-elementin tai sen alatason kautta, onmouseover-tapahtuma käynnistyy.
Esimerkki 1: Vaihda kuva hiirellä JavaScriptissä
Käytä HTML-tiedostossa -tunnistetta näyttääksesi kuvan verkkosivulla. Liitä ' hiiren päällä ”tapahtuma, joka kutsuu JavaScript-funktion, kun hiiri vie hiiren kuvan päälle:
< img id = 'menuImg' src = '1.jpg' hiiren päällä = 'hover (tätä);' />
Määritä JavaScript-tiedostossa funktio ' leijuu ' parametrilla ' img ”. Aseta määritetyssä funktiossa kuva, joka näytetään osoittimessa:
toiminto leijuu ( img )
{
img. src = '2.jpg'
}
Kuten näet, tulosteessa, kun viemme hiiren nykyisen kuvan päälle, se muuttuu yhtäkkiä:
Esimerkki 2: Vaihda kuva päälle
Yllä olevassa esimerkissä kuva muuttuu, kun hiiri on kuvan päällä, ja sama kuva pysyy. Nyt tässä esimerkissä ensimmäinen kuva tulee uudelleen näkyviin, kun hiiri liikkuu pois kuvasta. Tätä vaikutusta kutsutaan vaihtoefektiksi. Tätä tarkoitusta varten käytämme ' hiiren päällä ' ja ' on hiiri ulos ”HTML-ominaisuudet:
< img id = 'menuImg' src = '1.jpg' hiiren päällä = 'hover (tätä);' on hiiri ulos = 'hoverOut(this)' />
' hiiren päällä ' kutsuu ' leiju () '-toiminto, kun taas ' on hiiri ulos 'tapahtuma kutsuu funktiota' hoverOut() ”:
toiminto hoverOut ( img ) {img. src = '1.jpg'
}
Tulos näyttää, että kuvan vaihtaminen onnistui, kun hiiri on kuvan päällä, ja se muuttuu, kun hiiri on poistunut kuvasta:
Siinä oli kyse muuttuvasta kuvasta.
Johtopäätös
Jos haluat vaihtaa kuvan päällä, käytä ' hiiren päällä ' tapahtuma. Vaihda tehostetta käyttämällä ' hiiren päällä ' attribuutti ' on hiiri ulos ' tapahtuma. Kun hiirtä/osoitinta siirretään elementin tai jonkin sen lapsista, onmouseover-tapahtuma käynnistyy, kun taas kun hiiri/osoitin siirretään pois elementistä, tapahtuu onmouseout-tapahtuma. Tässä viestissä esitimme prosessin kuvan vaihtamiseksi hiirellä JavaScriptissä.