Help with mouseover

[wxdqz]

Hello,

Can anyone help me modify the following JavaScript code so that when the mouse cursor goes over the image, the script changes three images instead of one? What I'm trying to accomplish is this:

[1] [2] [3]

[2] is the image with the link. When a cursor goes over [2], the script changes [2] to [2'] (2' is another image), while at the same time changing [1] to [1'] and [3] to [3'].

This is the code:


<script language="JavaScript">

<!-- hide

var browserOK = false;
var pics;

// -->

</script>
<script language="JavaScript1.1">

<!-- hide

browserOK = true;
pics = new Array();

// -->

</script>
<script language="JavaScript">

<!-- hide

var objCount = 0;

function preload(name, first, second) {

// preload images and place them in an array

if (browserOK) {
pics[objCount] = new Array(25);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}

function on(name){
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[2]] != null)
if (name != pics[2]) {
// set back all other pictures
document.images[pics[2]].src = pics[0].src;
} else {
// show the second image because cursor moves across this image
document.images[pics[2]].src = pics[1].src;
}
}
}
}

function off(){
if (browserOK) {
for (i = 0; i < objCount; i++) {
// set back all pictures
if (document.images[pics[2]] != null)
document.images[pics[2]].src = pics[0].src;
}
}
}

preload("Usluge","/images/menu-usluge.gif" , "/images/menu-_usluge.gif");

// -->

</script>

<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"/images/clear.gif" width="7" height="25">
<a href="/usluge/index.asp" onMouseOver="on('Usluge')" onMouseOut="off()"><img name="Usluge" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"/images/menu-Usluge.gif"></a>