---

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Index of Examples

---

We'll examine the code to learn what's happening.

// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}

This part pre-loads the images. The images are downloaded into the browser's cache so they're here when the mouseover happens. The alternative would be to have the image download during the mouseover... which would look terrible. We want it to be instantaneous. Each of the lines above are for one image. The easiest way to do this for now is just use the filename of the image all the way across. The numbers are the image width & height. Note that all images used in a particular location need to be all the same size.

Let's suppose you wanted to use two images named switch_up.gif and switch_dn.gif, and these images were 55 pixels wide and 70 pixels tall. You would construct the preloading statements as follows...

switch_up = new Image(55,70); switch_up.src = "switch_up.gif";
switch_dn = new Image(55,70); switch_dn.src = "switch_dn.gif";

To add images, just add statements...

switch_up = new Image(55,70); switch_up.src = "switch_up.gif";
switch_dn = new Image(55,70); switch_dn.src = "switch_dn.gif";
image1 = new Image(80,20); image1.src = "image1.gif";
image2 = new Image(80,20); image2.src = "image2.gif";

Now look at the function...

function hiLite(imgName,imgObjName) {
if (document.images) {
  document.images[imgName].src = eval(imgObjName + ".src");
}}

Think of it as the batter in a ball game that swings at anything you throw at it. Throw an apple and an orange, it swings. Throw a banana and a barbie doll, it swings. Except our batter is a function that processes variables that we send to it.

We send those variables in the link...

<A HREF="another.html"
   onMouseOver="hiLite('img01','clickme2')"
   onMouseOut="hiLite('img01','clickme1')"><IMG 
   SRC="clickme1.gif" WIDTH="75" HEIGHT="22" 
   BORDER="0" ALT="" NAME="img01"></A>     

This is just a simple image link to another.html but with a couple additions.

Look at the first javascript command: onMouseOver="hiLite('img01','clickme2')". Translated this says "On mouseover, send the variables img01 and clickme2 to the function hiLite()"

The second javascript command is very similar - onMouseOut="hiLite('img01','clickme1')". Translated this says "On mouseout, send the variables img01 and clickme1 to the function hiLite()"

Note the NAME attribute in the IMG tag - NAME="img01". This puts a label on that particular image. It distinguishes it from every other image on the page. Each image location where you want an effect needs a different name. If you have three links - Home, Links & Email, they must each have a different name (img01, img02, img03 or homepic, linkpic, emailpic etc)

The function hiLite() knows what to swap where depending on what variables we send to it. In the link, when we write onMouseOver="hiLite('img01','clickme2')" we are sending variables to the function. We are saying "On Mouseover, take img01 and clickme2 and process accordingly." When the function gets the variables, it says "No problem" and proceeds to instantly place clickme2 in image location img01. (The only reason it happens instantly is because we've taken the time to preload the images.)

Also, for this simple mouseover, there's nothing we need to alter in the function. We add images to preload, we configure the link, but we don't do anything with the function.

Now, The best way to learn is to do. On that basis, I have something for you to do. Make a page from scratch and insert a mouseover using these two images...

  

Make it so that it starts out dark. When you mouse over it, it turns red, and when you click on it, you go to your homepage. (If you don't have a homepage yet, point it to my homepage.)

Then add a second and third mouseover to the same page using these images...

            

After completing these exercises you can consider yourself an old hand at adding mouseovers. Next we'll build on what we know and add a few more items to our bag of tricks.

Now, before moving on, I'm compelled to say something here. I suspect that some of you may be simply skimming through these instructions and maybe skipping these exercises. If your goal is to skim through so you can say that you read about how to add mouseovers images... fine. You've accomplished your goal. If, on the other hand, your goal is to actually learn how to do it so you can actually add mouseover effects to an actual page, then do the exercises. My instructions make up about 10% of your learning. Actually doing it is the other 90%... the important part. Remember, you learn by doing.

Magic Buttons - Javascript MouseOver Tutorial

Part 1  ·  Part 2  ·  Part 3  ·  Part 4  ·  Part 5  ·  Images  ·  Index of examples

HTML 4.0 Reference      Barebones HTML Guide