Cambio immagine al passaggio del mouse con i CSS
|
In questo articolo viene semplicemente replicato quello che si è fatto nell'articolo Cambio immagine al passaggio del mouse con JavaScript, con la differenza (non da poco...) che anziché utilizzare comandi JavaScript, il tutto viene gestito mediante l'utilizzo dei CSS. Codice CSS: |
|
.immagine1 { |
|
Con questo codice non si fà altro che creare una prima classe di nome immagine1 con l'attributo "display" impostato su block, cioè la classe viene resa come un blocco, sostanzialmente verrà visualizzata l'immagine che inseriremo nel tag <img> di questa classe. Successivamente si crea una seconda classe di nome immagine2 con l'attributo "display" impostato su none, cioè la classe non viene mostrata. Infine si crea un DIV di nome cambioimmagine e si gestisce su di esso l'evento del passaggio del mouse (cambioimmagine:hover...), che quando si verifica, renderà invisibile la classe immagine1 e visualizzerà la classe immagine2. Oltre a questo, naturalmente c'è il codice HTML: |
|
<html> |
|
che altro non è che una semplice pagina HTML in cui viene caricato il file CSS dal file "stile.css" mediante il tag <link>, e che visualizza due tag <img>, il primo di classe immagine1 ed il secondo di classe immagine2, ognuno con la rispettiva immagine da visualizzare, all'interno di un div di tipo cambioimmagine. Anche in questo caso l'effetto che si ottiene è il seguente: |
  |
|
Chiunque ne abbia voglia può copiare ed incollare il codice dell'esempio, creando un file stile.css ed un file pagina.html, e provarlo così sul proprio PC con immagini a proprio piacimento, basterà semplicemente cambiare il nome delle immagini "manoaperta.png" e "manopollicesu.png" con il giusto percorso in cui si trovano. Max P. 06/04/2017 |
