- Web Development Tutorials

JavaScript Rollovers: 4

How have multiple links change a single image

Now that we have changed images in all sorts of other ways, we are left with: "How to change one image to various other images when a viewer runs the mouse over a set of links or linked images". A long explanation, but the script for this is the shortest rollover script we have written yet. Of course, we are going to make a couple of adjustments that we didn't make in the earlier scripts in order to condense the code a bit.

First, let's look at an example of what I was tryng to say in that long quote at the beginning. A visual has to be better than that quote I wrote, right? Here it is, place your mouse over some of the links below and watch the image change accordingly:

Noise    Yellow    Big Face    Seeing Spots

This comes from the same script we have been using in the previous rollover tutorials. You should be familiar with JS Hover Buttons and JS Hover Buttons 2 as they help explain the basics about the preloading and such. This script will also use Object Detection like we did in the previous sections.

The HEAD Section Code

Now that we have the example, we need some code to see how this thing works. Let's start by looking at the code for the HEAD section of the page, here it is:

<SCRIPT language="JavaScript">
  if (document.images)
     image_off= new Image(100,100);

     image2= new Image(100,100);
     image3= new Image(100,100);
     image4= new Image(100,100);
     image5= new Image(100,100);

function change1(picName,imgName)
   if (document.images)
      imgOn=eval(imgName + ".src");
      document[picName].src= imgOn;

Pretty short in comparison to our previous rollover scripts, isn't it? The preloading is basically the same. However, rather than adding "on.src" at the end of the image location definitions, we simply add .src to it. This is one are where we shorten the coding a bit. Since the image is "on" anytime a link is hovered, the "on" bit would not serve as a helpful hint here. We do have one named image_off, since this would be the default image and might help. The other images are just given a different number like "image2", "image3" and so on. These changes will make more sense as we look at the function.

The function begins by taking two parameters (yes, parameters agian!). The first is the name of the image in your image tag, where you write your name="name" attribute (In this script, the name is pic1, see the IMG tag in the BODY code below). The second parameter is the name of the image object that will replace the default (off) image when the mouse moves over the link.

After that, we detect the image object. Then, we use the parameters to change the default image.

imgOn=eval(imgName + ".src");

This takes the image name and adds the .src to it so the script finds the location of the replacement image. It assigns that url to the imgOn variable.

document[picName].src= imgOn;

This actually changes the image. You'll see the picName variable is used, so that the image name sent into that variable (pic1 for this script) is changed to the replacement image.

The turnoff() function used on the onMouseout event in the previous scripts was repetitive. It did the same thing as the lightup function, but on the onMouseout event. It was used for clarification, but now we can just use this single change1() function for the onMouseover and onMouseout events to condense the code further. This helped shorten the code quite a bit here.

The BODY Section Code

This is where the functions are called and the parameters are set. Here is the code, (preformatted):

<A HREF="url" onMouseover="change1('pic1','image2')" onMouseout="change1('pic1','image_off')">Noise</A>
<A HREF="url" onMouseover="change1('pic1','image3')" onMouseout="change1('pic1','image_off')">Yellow</A>
<A HREF="url" onMouseover="change1('pic1','image4')" onMouseout="change1('pic1','image_off')">Big Face</A>
<A HREF="url" onMouseover="change1('pic1','image5')" onMouseout="change1('pic1','image_off')">Seeing Spots</A>
<IMG SRC="" name="pic1" width="100" height="100" border="0">

Just change the urls and text to your own choices. Then, you'll see that all the onMouseout calls are the same. You will want your onMouseout calls to be the same too (not necessarily exactly like this one, but they should all match each other). The onMouseout command calls the default image object you defined while preloading. Ours was named "image_off".

The calls made onMouseover only change the second parameter. It is changed to one of the replacement image objects you defined while preloading. Just choose the one that fits with your link.

Finally, be sure the name="name" attribute in the IMG tag matches the first parameter you send to the function in each case. Ours was pic1, but you may choose another name-- just be sure to change the function calls to match it.

You'll notice that the pic1 parameter didn't change in any of the function calls, so you may wonder why we should bother with the parameter and just use pic1 in the function itself. The reason is so you could use this function for more than one image/link set on the page. Just be sure to give the other image(s) a new name in the IMG tag in the name="name" attribute. For instance, the second one could have name="pic2". You could then call the function by replacing all the pic1 parameters with pic2, and now the first parameter has a use. Then again, the use of it just depends on how many times you want to use the effect on a single page.

Well, that does it for now, let's get a better explanation on object detection in the next section: JS Object Detection.

By: John Pollock next

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy