Ovaj post će demonstrirati proceduru za promjenu slike kada lebdite u JavaScriptu.
Kako promijeniti sliku dok lebdite u JavaScriptu?
Za promjenu slike dok lebdite, koristite ' prelazak mišem ” događaj. Kada se miš/kursor pomakne kroz HTML element ili jedno od njegovih potomaka, pokreće se događaj onmouseover.
Primjer 1: Promjena slike pri lebdenju u JavaScriptu
U HTML datoteci upotrijebite oznaku za prikaz slike na web stranici. Priložite ' prelazak mišem ” događaj koji će pozvati JavaScript funkciju kada miš prijeđe iznad slike:
< img id = 'menuImg' src = '1.jpg' prelazak mišem = 'lebdite (ovim);' />
U JavaScript datoteci definirajte funkciju ' lebdjeti ” s parametrom “ img ”. U definiranoj funkciji postavite sliku koja će se prikazivati kada lebdite:
funkcija lebdjeti ( img )
{
img. src = '2.jpg'
}
Kao što možete vidjeti, u izlazu, kada prijeđemo iznad trenutne slike, ona se iznenada mijenja:
Primjer 2: prebacivanje slike dok lebdite
U gornjem primjeru, slika se mijenja kada mišem prijeđete iznad slike, a ista slika ostaje. Sada, u ovom primjeru, prva slika će se ponovno pojaviti kada se miš pomakne izvan slike. Taj se učinak naziva efekt prebacivanja. U tu svrhu koristit ćemo ' prelazak mišem ' i ' onmouseout ” HTML svojstva:
< img id = 'menuImg' src = '1.jpg' prelazak mišem = 'lebdite (ovim);' onmouseout = 'hoverOut(ovo)' />
“ prelazak mišem ” naziva “ lebdjeti() ” dok je „ onmouseout ” događaj poziva funkciju ” hoverOut() ”:
funkcija hoverOut ( img ) {img. src = '1.jpg'
}
Izlaz pokazuje da je slika uspješno promijenjena kada je miš iznad slike i promijenjena je kada miš izlazi iz slike:
To je bilo sve o promjeni slike pri lebdenju.
Zaključak
Za promjenu slike dok lebdite, koristite ' prelazak mišem ” događaj. Za efekt prebacivanja koristite ' prelazak mišem ' atribut s ' onmouseout ” događaj. Kada se miš/pokazivač pomakne kroz element ili jedno od njegovih potomaka, pokreće se događaj onmouseover, dok kada se miš/pokazivač pomakne izvan elementa, događa se događaj onmouseout. U ovom smo postu demonstrirali proceduru za promjenu slike pri lebdenju u JavaScriptu.