Olimpo Informatico

[HelpMe!!!]

Salve ragazzi, il mio problema è questo: Non riesco ad impostare nella stessa pagina più di un effetto rollover con successo.
Il CSS è questo:
<SCRIPT>
<!--
var but1 = new Image(111,29) ;
but1.src = "home.gif" ;

var but2 = new Image(111,29) ;
but2.src = "home2.gif" ;

function apage()
{
document.images[0].src=but2.src;
}

function bpage()
{
document.images[0].src=but1.src;
}
// -->
</SCRIPT>

Html è questo:
<div><STYLE TYPE="text/css">
#a { position: absolute; top: 0; left:0; z-index: 1;}
#b { position: absolute; top: 0; left:0; z-index: 2;}
</STYLE>
<div id= "a">

<A HREF="index.htm"
onMouseOver="apage()"
onMouseOut="bpage()"
>
<IMG SRC="home.gif" WIDTH=111 HEIGHT=29 BORDER=no>
</A></div>

Premetto che il codice funziona benissimo, solo che non sò che fare con più di un immagine, perchè le immagini successive seguono sempre le coordinate date alla prima immagine ance se ne imposto altre, avete idee su come differenziarli?

[HelpMe!!!]

Ho trovato la soluzione, chiudete la discussione ( anche se nessuno sapeva la risposta....).