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

Roll over the images below.

Red Yellow Green


The script:

<script type="text/javascript">
//<![CDATA[
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>