Si chiamano rollover e sono immagini che cambiano nel momento in cui viene passato sopra il puntatore del mouse. Il cambio avviene grazie a due gestori di eventi di JavaScript e precisamente: onMouseOut e onMouseOver.

Ogni immagine contenuta all'interno di una pagina web ha un suo numero indice che la identifica; l'esempio sotto riportato andrà benissimo anche per più immagini, si tratterà semplicemente di incrementare ogni volta il numero indice che si trova fra le parentesi quadrate [x].

<a href="link1.html"
onMouseOver="document.images[0].src='immagine_alternativa.gif';"
onMouseOut="document.images[0].src='immagine.gif';">
<IMG src="immagine.gif" width=xx height=yy></a>


Le immagini dovranno essere almeno 2, in questo esempio: immagine.gif ed immagine_alternativa.gif, dovranno avere per ovvi motivi le stesse identiche dimensioni in altezza e larghezza. immagine.gif è quella che si vede normalmente a caricamento pagina avvenuto, nel momento esatto in cui il cursore del mouse passerà sopra all'immagine, questa cambierà aspetto richiamando immagine_alternativa.gif, per poi tornare allo stato iniziale nel momento in cui il cursore del mouse abbandona l'area occupata dalla nuova immagine.

Se le immagini sono più di una, si dovrà semplicemente ripetere lo stesso codice cambiando nome alle immagini e incrementando il numero fra parentesi quadre in questo modo:

<a href="link2.html"
onMouseOver="document.images[1].src='immagine_alternativa2.gif';"
onMouseOut="document.images[1].src='immagine2.gif';">
<IMG src="immagine2.gif" width=xx height=yy></a>


Continuando sulla stessa falsa riga si possono creare tutti i rollover che necessitano all'interno di una stessa pagina web. Se le immagini sono molte o queste fossero piuttosto "pesanti" è consigliabile eseguire un preload delle stesse per evitare che il tempo necessario al loro scaricamento sia un ostacolo al buon funzionamento dell'effetto grafico.

Questo sotto un esempio, al passaggio del mouse sopra l'immagine "Preload" avviene lo scambio con "Immagini".