In giro per il web ci sono numerosi documenti che spiegano come impostare il rollover delle immagini nelle pagine web. Si trovano metodi a volte anche molto complessi per gestire una cosa che in realtà è veramente banale. Questi sono i due metodi che preferisco.
Metodo con javascript
Si utilizzano gli eventi onmouse* dell'oggetto img per cambiare il parametro src dell'oggetto stesso:
<img src="image1.jpg" alt="img"
onmouseover="this.src='img_over.jpg';"
onmousedown="this.src='img_down.jpg';"
onmouseout="this.src='img_out.jpg';"
onmouseup="this.src='img_up.jpg';" />
Metodo con CSS per rollover a due stati
L'immagine nella nostra pagina web sarà identificata da un certo ID, ad esempio:
<div id="image1"></div>Se le dimensioni dell'immagine sono di 150x50 pixel, dovremo farne una di 150x100 pixel dove nella metà in alto c'è l'immagine nello stato di default, nella metà in basso invece c'è l'immagine che si vuole usare quando ci si passa sopra con il mouse.
Il trucchetto è semplice: basta specificare nel CSS che il nostro contenitore è largo 150px ed alto 50px ed impostare come background l'immagine scelta. Con il selettore speciale :hover modifichiamo il background impostando il margine superiore a -50px:
#image1 {
height: 50px;
width: 150px;
background: url('img1.jpg') no-repeat 0 0;
}
#image1:hover {
height: 50px;
width: 150px;
background: url('img2.jpg') no-repeat 0 -50px;
}Il secondo metodo può apparire più complicato, in realtà evita di dover eseguire il preload delle immagini, operazione invece molto utile nel caso si usi il primo metodo.
Nel secondo caso, se l'immagine deve essere cliccabile, sconsiglio di inserire il <div> all'interno di un <a> poichè questo invaliderebbe il codice, piuttosto si può inserire l'elemento <a> all'interno del <div> ricordandosi di fissarne le dimensioni e specificando lo stile display:block;.
Ad esempio il menu in alto a destra di questo sito è realizzato con il secondo metodo.