 |
Image Rollover
with Preload
by
Sharif aka the Reefster : 09 July 2004What 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.
[ Roll
over the image and watch it change smoothly ] |
 |
Note |
|
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">
-
- </script>
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 ];
- }
 |
Explanation |
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 |
 |
|
|
|
