Cambio immagine al passaggio del mouse con JavaScript
|
Quello che voglio proporre in questo articolo, è semplicemente la gestione di un evento legato ad una immagine su una pagina web, cioè il passaggio del mouse sulla immagine stessa. La gestione di questo evento può risultare utile quando si vuole creare un effetto particolare con una immagine, ad esempio come quello nella Home di questo sito per intenderci, dove ho voluto creare l'effetto di una lampadina spenta che si accende al passaggio del mouse. In realtà non si tratta di un vero e proprio script, ma semplicemente di un comando javascript che può essere inserito nel tag <img> che visualizza l'immagine sulla pagina. |
|
<html> |
|
Il codice precedente non è altro che una semplice pagina HTML in cui si visualizza l'immagine "smile.png", ed il passaggio del mouse su di essa (onmouseover) viene gestito cambiandola con l'immagine "smile_okkio.png" mediante il comando "this.src", naturalmente quando il mouse esce dall'area dell'immagine (onmouseout), si visualizza nuovamente l'immagine di partenza. L'effetto che si può ottenere è il seguente: |
  |
|
Naturalmente l'uso che si può fare di questo metodo può essere molteplice, dal semplice effetto del cambio di espressione (come l'esempio mostrato...), all'effetto di evidenziare l'immagine linkata come un pulsante che si accende (vedi Home...), oppure un effetto zoom cambiando l'immagine con la stessa leggermente ingrandita. Molto dipenderà dalle immagini stesse, che si utilizzeranno per realizzare l'effetto desiderato. Chiunque ne abbia voglia può copiare ed incollare il codice dell'esempio, e provarlo sul proprio PC con immagini a proprio piacimento, basterà semplicemente cambiare il nome delle immagini "smile.png" e "smile_okkio.png" con il giusto percorso in cui si trovano. Max P. 06/04/2017 |
