JavaScript Tutorial #2
Image Rollovers using "pre-loading"
If you would like to download the images I used in this tutorial, you may do so here
If you are a beginning web developer you most likely have searched out ways to do image rollovers! This is one of the oldest JavaScript tricks in the book! In the case of simple text rollovers, CSS can take care of 99.99% of these, and that is another story entirely (Hurray for CSS!). However, the swapping of images in the case of a mouseover/mouseout event is still handled for the most part by scripting languages like JavaScript along with the array of JavaScript libraries cropping up (jquery, mootools etc).
There are a million-and-one tutorials out there on how to do the JavaScript Image Swap. Some are great, some, not-so great. One thing I have noticed however that many of them leave out is "preloading of images". This basically means that all of the images you'll be using in your JavaScript program are ready to use immediately as soon as the page loads. This eliminates any potential "hiccups" we all have run into on certain web pages. What I mean specifically is that the page "blinks-out" for a split second when what was intended to be an Image Swap (Image Rollover), didn't quite pan out the way it was supposed to. The technique of preloading your images will take care of this little inconvenience.
What you'll need
For this tutorial basically all you'll need are:
1. (a minimum) of 2 images to use for the swap,
although you can use
as many as you'd like.
2. A simple text editor
Now, lets learn how to do this!
1. First, set up your (x)html document with all the necessary ingredients to go in the head and body sections. If you would like to use styles, go ahead and create those although for the simple page we'll be creating it won't really be necessary.
Now, within the head section of your document create a javascript script element. If you
don't know what that looks like see the example below:
<script type="text/javascript>
Our ingredients will go here
</script>
2. Next, we are going to set up 2 arrays. One will be for the "over" version of the
image, the other will be for the "out" version of the image. In other words "over" will be the image
rollover/swap and "out" will be the original image. It looks like this:
<script type="text/javascript>
var ImgOne = new Array();
ImgOver[0] = "new Image";
ImgOver[1] = "new Image";
ImgOver[2] = "new Image";
ImgOver[3] = "new Image";
var ImgOut = new Array();
ImgOut[0] = "new Image";
ImgOut[1] = "new Image";
ImgOut[2] = "new Image";
ImgOut[3] = "new Image";
</script>
The above arrays basically create a JavaScript "Image Object" for each state of the images in the document that will have an Image Swap applied to them. ** We have not yet "pre-loaded" our images. That will come next.
3. The "Pre-Loading" part
Now, we need to tell the browser where those images "are coming from", or, said another way, their "source". Once this is defined, we'll have "pre-loaded" our images. Now, lets add to the above arrays and supply the browser with what it needs! (The indented part of each array is the new stuff!)
*****Please Note: You'll notice that my path names for the source of my images is simply .src="whatever.jpg". Just remember, if your images are in an images folder, you'll have to include that in your path as well. This seems obvious I know but it can be a simple oversight!
<script type="text/javascript>
var ImgOne = new Array();
ImgOver[0] = "new Image";
ImgOver[1] = "new Image";
ImgOver[2] = "new Image";
ImgOver[3] = "new Image";
ImgOver[0].src="lou-over.jpg";
ImgOver[1].src="cup-over.jpg";
ImgOver[2].src="car-over.jpg";
ImgOver[1].src="hand-over.jpg";
var ImgOut = new Array();
ImgOut[0] = "new Image";
ImgOut[1] = "new Image";
ImgOut[2] = "new Image";
ImgOut[3] = "new Image";
ImgOut[0].src="lou.jpg";
ImgOut[1].src="cup.jpg";
ImgOut[2].src="car.jpg";
ImgOut[1].src="hand.jpg";
</script>
4. The last thing(s) we need to add to this script element (before we go down into the body of the document), are a couple very simple javascript functions that do the actual swapping of the images. I will place those below. Remember, these must be included in the script element, even though I am showing them on their own here!
function Over(i){
document.images[i].src=ImgOver[i].src;
}
function Over(i){
document.images[i].src=ImgOver[i].src;
}
These 2 functions bascially say, "take the current image and replace it using this new source" (which was provided in the arrays we created).
To re-cap up to this point. The entire script element in the head section of your (x)html document should
now look like this (substitute your own images obviously!).
<script type="text/javascript>
var ImgOne = new Array();
ImgOver[0] = "new Image";
ImgOver[1] = "new Image";
ImgOver[2] = "new Image";
ImgOver[3] = "new Image";
ImgOver[0].src="lou-over.jpg";
ImgOver[1].src="cup-over.jpg";
ImgOver[2].src="car-over.jpg";
ImgOver[1].src="hand-over.jpg";
var ImgOut = new Array();
ImgOut[0] = "new Image";
ImgOut[1] = "new Image";
ImgOut[2] = "new Image";
ImgOut[3] = "new Image";
ImgOut[0].src="lou.jpg";
ImgOut[1].src="cup.jpg";
ImgOut[2].src="car.jpg";
ImgOut[1].src="hand.jpg";
function Over(i){
document.images[i].src=ImgOver[i].src;
}
function Over(i){
document.images[i].src=ImgOver[i].src;
}
</script>
5. The last thing that we need to do in order to get this all to work is
to attach some simple JavaScript "event handlers" to the image tags in the body of our document. Using
my own image tags, that would look like this:
<img src = "lou.jpg" alt="lou" width="90px" height="90px" onmouseover="Over(1)" onmouseout="Out(1)" />
This would be done to each image in the array of images I am applying the Image Swap to.
Below, you'll see a demonstration of this script in action. Further down you'll find a text box containing some code you can copy and paste (and modify to suit your needs!).
