CIT041J Index > Lecture Notes - Images > Rollover using associative arrays

Roll over the images below.

Red Yellow Green


The script:

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

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

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

function change( imageName, newSource )
{
    document.images[imageName].src = newSource;
}
// ]]>
</script>

The HTML:

<p align="center">
<a href="#" onmouseover="change('redImg', 'rollover/red1.jpg')"
    onmouseout="change('redImg', 'rollover/red0.jpg')"><img src="rollover/red0.jpg"
    name='redImg' width="100" height="100" alt="Red" /></a>

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

<a href="#" onmouseover="change('greenImg', 'rollover/green1.jpg')"
    onmouseout="change('greenImg', 'rollover/green0.jpg')"><img src="rollover/green0.jpg"
    name='greenImg' width="100" height="100" alt="Green" /></a>
</p>