Rollover su immagini con JS

Gli argomenti di questa pagina

  • Rollover su immagine
  • Rollover su link

Rollover su immagine

Come primo esempio portiamo questo. Quando il puntatore del mouse l'immagine cambia e viene chiamata la seconda immagine. Per ottenere questo è sufficiente scrivere poco codice JS nel tag stesso dell'immagine usando gli eventi onmouseover e onmouseout.

1
<img src="images/image_1.jpg" alt="test su immagine" onmouseover="this.src='images/image_2.jpg'" onmouseout="this.src='images/image_1.jpg'" />
test su immagine

Rollover su link

Come secondo esempio questo. Anche in questo caso non viene manipolato il link col JS, ma solo l'immagine. Quando il puntatore del mouse sembra passare sul link in realtà è sull'immagine che passa e questa azione del puntatore fa sì che sia venga cambiata l'immagine chiamando la seconda immagine. Il codice usato è lo stesso di quello usato per l'immagine con la differenza che è l'immagine col suo piccolo script JS che viene inclusa tra il tag di apertura del link e quello di chiusura.

1
<a href="#"><img src="images/prova_verde.gif" alt="test su link" onmouseover="this.src='images/prova_rosso.gif'" onmouseout="this.src='images/prova_verde.gif'" /></a>
test su link

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum