Roll over the images below.
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>