<script type="text/javascript">
//<![CDATA[
// Keep these names in variables so that
// they need to be changed in only one place.
var imgDirectory = "rollover/";
var offSuffix = "0.jpg";
var onSuffix = "1.jpg";

// This array is still needed for preloading
var imgName = new Array(
    "red",
    "yellow",
    "green",
    "cyan"
);

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

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

function highlight( imageName, turnOn )
{
    var theURL;

    theURL = imgDirectory + imageName;
    if (turnOn)
    {
        theURL += onSuffix;
    }
    else
    {
        theURL += offSuffix;
    }
    document.images[imageName].src = theURL;
}
// ]]>
</script>

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

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

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

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