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
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
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. Make sure to put these tags inside your
These 2 tags will make it happen. So whenever I show you
Part 1: Preloading
Inside the script tags, add this code:
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
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
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