Image Rollovers
I'm sure you've seen some web sites using these effects to spice up their image links. If you don't know what image rollovers are, here is an example:
See what happened? When you put your mouse over the image, it changed into another image. That's what we're going to learn today.
Step 1: The Images
First thing we need to have are 2 different images. For the example I gave, these are the ones I used:
The first one is the default image. Let's name it off.gif for this example. The second one is the image that is displayed when you put your mouse over the link. Let's name it on.gif for this example. Both can be of different sizes but it's best to use images of the same size to keep it uniform.
Got your images ready? Let's go to the next step...
Step 2: The Code
<a href="http://www.blinding-light.com" onmouseover="image1.src='on.gif'; return true;" onmouseout="image1.src='off.gif'; return true;"><img src="off.gif" width="88" height="31" border="0" name="image1"></a>
To explain the code, we'll go through each part one by one:
<a href="http://www.blinding-light.com"
Code to make a link. It's very basic so we don't have to discuss this any further.
onmouseover="image1.src='on.gif'; return true;" onmouseout="image1.src='off.gif'; return true;">
This part of the code does the rollover effect. What it does is it changes the image labeled as image1 to on.gif when you put hover mouse on it. When you remove your mouse from it, it changes the image labeled as image1 back to off.gif which is our default image. Labeling images will be explained later in this tutorial.
<img src="off.gif" width="88" height="31" border="0"
Code to display our default image. I'm sure you already know how this works so there isn't any need to explain.
name="image1"></a>
We use the name parameter so we can label an image. In the example, we labeled it as image1. Its value is supposed to be unique. So, if you have several link images to change over, they should have a different value for the name parameter. Example: image2, image3, and so on.
All the underlined text in the code can be changed to whatever you want.
Conclusion
Now, wasn't that easy? Since this is a JavaScript tutorial, this only works for browsers that have JavaScript enabled.
Images used for the button displayed in this tutorial came from the Nintendo game Dr. Mario.
If you have any questions or if you want to discuss this tutorial, you may post at Blinding Light MB.