Image Rollover with Preload
       by Sharif aka the Reefster : 09 July 2004

What do you do when your visitors are patiently waiting and pulling their hair because a simple button image isn't being loaded correctly? You javascript the Sharif out of it. In Part 1 of the tutorial, you'll learn to basically preload any image properly. In Part 2, you'll learn to create rollover images mostly for links and navigation bars. With the preloading and the rollover creation, you'll have some pretty smooth non-delayed rollovers.

The Forums Rollover

[ Roll over the image and watch it change smoothly ]

Make sure you know basic the HTML formats like head tags, body tags, href tags and img tags.

Script Tags
Before we begin, all our javascript will be in these script tags. Make sure to put these tags inside your head tags:
<script type = "text/javascript">
These 2 tags will make it happen. So whenever I show you some javascript, we'll be putting it inside these tags.

Part 1: Preloading Script
Inside the script tags, add this code:

var myImages = new Array ("Home.jpg", "HomeRoll.jpg");
var myPreload = new Array ();
for (var i = 0; i < myImages.length; i++ )
myPreload[ i ]= new Image();
myPreload[ i ].src = myPics[ i ];
Line 1: We create a new variable called myImages and set this as a new Array. Inside this will be the names of all the images you need to preload. Just seperate them by a comma and put them in quotes. In this case, Home.jpg and HomeRoll.jpg as just examples. Home.jpg is the initial state and HomeRoll.jpg is the Rollover state.

Line 2: We create a new variable that will preload the images and is also set to an array so it can take multiple names and perform it's functions with them.

Line 3: This is will make a for statement that takes the amount of images in the myImages variable and load them each one by one.

Line 5: Sets myPreload as new Image.

Line 6: Preloads the files from the myPics images input.

Okay then, you're done with part one. Simple right? Now you can preload your images on links and navigation bars so that rollovers don't delay. I highly recommend you read the explanation so you know how this works.

Okay! On to Part 2, eat your Oreos and let's continue.


 page 1 of 2


SUPPORTERS:'s fast and reliable hosting provided by Media Temple.