ciao a tutti, sto realizzando una pagina web con rollover di immagini nei css.

la pagina è questa

il problema è che quando passo con il mouse sulle immagini (la prima volta) queste si mischiano.

nella pagina il codice è <a href="#" class="ROLL">, mentre nel foglio di stile il codice è:
a.ROLL
{
background-image: url(images/boxfoto1.gif);
width: 520px;
height: 189px;
}

a.ROLL:hover
{
background-image: url(images/boxfoto1_over.gif);
width: 520px;
height: 189px;
}
per le altre foto ho sostituito ROLL con ROLL1, ROLL2, ROLL3
con 2 foto non mi da problemi, con 4 sì.

qualcuno potrebbe consigliarmi qualcosa di alternativo o risolvere questo?

grazie enc98