 |
Image Rollover
with Preload
by
Sharif aka the Reefster : 09 July 2004
This is Part 2 of the tutorial. You will now learn to create
simple javascript image rollovers for your links and
navigation bars. If you missed a couple of steps or would
like to revise Part 1 again,
Click Here.
Part 2: Creating The Function
Alright, now we're going to make a function that will swap
the images. When the mouse is not over the image
(mouseout), it will be the initial state of nothing
happening. When the mouse is over the initial state
(mouseover), it will become the rollover state and change
the image. Insert this code into the script tags, doesn't
matter if it's under or on top of the preload script.
By the way guys - Before you do this part, make sure
you have the 2 images for the button ready-made in Photoshop
or some type of program. Make one image that will be just
the main initial state, and then change this main one
slightly to indicate the user that he/she has rolled over
the image.
- function
mySwap(s)
- {
- if
( s
== 0
)document.images.HomeBTN.src
= "Home.jpg";
- if
( s
== 1
)document.images.HomeBTN.src
= "HomeRoll.jpg";
- }
 |
Explanation |
Line 1: Creates a function for the swap. When
(s) is changed, the image will change.
Line 3: If (s) is set to 0, then the
documents images will look for the image ID of
HomeBTN and change it's src to Home.jpg, the initial
state.
Line 4: If (s) is set to 1, then the
documents images will look for the image ID of
HomeBTN and change it's src to HomeRoll.jpg, the
rollover state. |
|
IMG Tags
All our javascript is done. Now we have our images preloaded
and ready to be rolled over. Now, when you create your img
tags, make sure it's something like this.
- <img
id="HomeBTN"
src="Home.jpg"
width="100"
height="100"
onmouseout="mySwap(0)"
onmouseover="mySwap(1)"
/>
 |
How
This Works |
|
Okay - first, the id of the image is HomeBTN. This
is how the browser knows specifically what image to
change. Then we have the src, Home.jpg. The initial
state. Width and height can be changed of course to
your own actual dimensions. I highly recommend that
if you have 2 images that will be swapped, keep them
the same size/dimensions. Now the main code,
onmouseout="mySwap(0)". This changes the (s) to 0 of
the mySwap function. This means that when there is
no mouse, keep (s) to 0, thus the initial state. The
last code, onmouseover="mySwap(1)", when the mouse
is over, change (s) to 1 of the mySwap function,
thus the rollover. |
|
Ta-da! That's it. Now you have your preloaded, ready to
roll, smooth, non-delayed rollovers. This tutorial may have
seen long, but it's only because of all the explaining. Hope
this helped you in some way.
When you create a site for a client or whoever, and you
don't want to use flash or can't, use javascript and some
simple Photoshop to create these amazing rollovers. Any
questions? Comments? Post them in the beloved
kirupaForum.
 |
Sharif
the Reefster |
 |
page
2 of
2 |
|
|
|
|
