Rollover Demo

The key to a successful rollover is to preload the images into the browser cache. This means that the browser does not have to fetch the replacement image from the server each time the mouse event fires. In this example the following script in the <head> of the page fulfils this purpose. The rollover itself can be effected by an in-line script in the <img> tag in the body of the page, or in a link.

<script type="text/javascript"> var image1 = new Image() image1.src = "images/Kevin Phillips.jpg" var image2 = new Image() image2.src = "images/Alan Shearer.jpg" </script>

Javascripts Page | Home