<script type="text/javascript">
//<![CDATA[
var onImageURL = new Array(
    "rollover/red1.jpg",
    "rollover/yellow1.jpg",
    "rollover/green1.jpg",
    "rollover/cyan1.jpg"
);

var offImageURL = new Array(
    "rollover/red0.jpg",
    "rollover/yellow0.jpg",
    "rollover/green0.jpg",
    "rollover/cyan0.jpg"
);

var imgName = new Array(
    "redImg",
    "yellowImg",
    "greenImg",
    "cyanImg"
);

var preload = new Array( imgName.length );
var imgNum;

for (imgNum = 0; imgNum < imgName.length; imgNum++)
{
    preload[imgNum] = new Image( );
    preload[imgNum].src = onImageURL[imgNum];
}

function highlight( imageNumber, turnOn )
{
    var theURL;
    var theName;
    
    theName = imgName[ imageNumber ];
    if (turnOn)
    {
        theURL = onImageURL[ imageNumber ];
    }
    else
    {
        theURL = offImageURL[ imageNumber ];
    }
    document.images[theName].src = theURL;
}
// ]]>
</script>

<a href="#" onmouseover="highlight(3, true)"
    onmouseout="highlight(3, false)"><img src="rollover/cyan0.jpg"
    name='cyanImg' width="100" height="100" alt="Cyan" /></a>

<a href="#" onmouseover="highlight(0, true)"
    onmouseout="highlight(0, false)"><img src="rollover/red0.jpg"
    name='redImg' width="100" height="100" alt="Red" /></a>

<a href="#" onmouseover="highlight(2, true)"
    onmouseout="highlight(2, false)"><img src="rollover/green0.jpg"
    name='greenImg' width="100" height="100" alt="Green" /></a>

<a href="#" onmouseover="highlight(1, true)"
    onmouseout="highlight(1, false)"><img src="rollover/yellow0.jpg"
    name='yellowImg' width="100" height="100" alt="Yellow" /></a>