Questo post dimostrerà la procedura per modificare l'immagine al passaggio del mouse in JavaScript.
Come modificare un'immagine al passaggio del mouse in JavaScript?
Per modificare l'immagine al passaggio del mouse, utilizzare il pulsante ' al passaggio del mouse evento. Quando il mouse/cursore viene spostato attraverso un elemento HTML o uno dei suoi figli, viene attivato l'evento onmouseover.
Esempio 1: modifica dell'immagine al passaggio del mouse in JavaScript
In un file HTML, usa il tag per mostrare l'immagine su una pagina web. Allega il ' al passaggio del mouse ” evento che chiamerà la funzione JavaScript quando il mouse passa sopra l'immagine:
< img id = 'menuImg' src = '1.jpg' al passaggio del mouse = 'passa il mouse (questo);' />
In un file JavaScript, definisci una funzione ' librarsi ” con il parametro “ imm ”. Nella funzione definita, imposta l'immagine che verrà mostrata al passaggio del mouse:
funzione librarsi ( imm )
{
imm. src = '2.jpg'
}
Come puoi vedere, nell'output, quando passiamo sopra l'immagine corrente, cambia improvvisamente:
Esempio 2: attiva o disattiva l'immagine al passaggio del mouse
Nell'esempio precedente, l'immagine cambia quando il mouse passa sopra l'immagine e rimane la stessa immagine. Ora, in questo esempio, la prima immagine riapparirà quando il mouse esce dall'immagine. Questo effetto è chiamato effetto di commutazione. A tale scopo, utilizzeremo il ' al passaggio del mouse ' e ' onmouseout ' Proprietà HTML:
< img id = 'menuImg' src = '1.jpg' al passaggio del mouse = 'passa il mouse (questo);' onmouseout = 'hoverOut(questo)' />
“ al passaggio del mouse ” chiama il “ passa il mouse() ” funzione mentre, il “ onmouseout ” evento chiama la funzione “ hoverOut() ”:
funzione hoverOut ( imm ) {imm. src = '1.jpg'
}
L'output mostra che l'immagine viene modificata correttamente quando il mouse si trova sopra l'immagine e viene modificata quando il mouse esce dall'immagine:
Riguardava l'immagine che cambia al passaggio del mouse.
Conclusione
Per modificare l'immagine al passaggio del mouse, utilizzare il pulsante ' al passaggio del mouse evento. Per attivare/disattivare l'effetto, utilizzare il pulsante ' al passaggio del mouse ” attributo con “ onmouseout evento. Quando il mouse/cursore viene spostato attraverso un elemento o uno dei suoi figli, viene attivato l'evento onmouseover, mentre quando il mouse/puntatore viene spostato fuori da un elemento, si verifica l'evento onmouseout. In questo post, abbiamo dimostrato la procedura per modificare l'immagine al passaggio del mouse in JavaScript.