PageResource.com - Web Development Tutorials

JavaScript Hover Buttons 3

How to create a rollover for multiple images

Well, how do you go about changing more than one image at a time? Maybe you want the image the mouse is over to change and have another change at the same time. Here is an example below. Move your mouse over the top image, and both images change!


This comes from the same script we have been using in the previous rollover tutorials. You will need to be familiar with JS Hover Buttons and JS Hover Buttons 2 before you proceed.

Now, this script will also use Object Detection like we did in the previous section. This time, we want to change both images when the mouse is over the top one. Again, I'll start by giving you the complete script for this trick. See if you can catch the changes that make the script change more than one image at a time:

<BODY>
<SCRIPT language="JavaScript">
<!--

  if (document.images)
   {
     pic1on= new Image(100,25);
     pic1on.src="shoes2.gif";  
     pic2on= new Image(100,25);
     pic2on.src="story2.gif";

     pic1off= new Image(100,25);
     pic1off.src="shoes1.gif";
     pic2off= new Image(100,25);
     pic2off.src="story1.gif";
   }

function lightup(imgName,imgName2)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
      imgOn2=eval(imgName2 + "on.src");
      document[imgName2].src= imgOn2;
    }
 }

function turnoff(imgName,imgName2)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
      imgOff2=eval(imgName2 + "off.src");
      document[imgName2].src= imgOff2;
    }
 }

//-->
</SCRIPT>
</HEAD>

<BODY>
<A HREF="newpage.html" onMouseover="lightup('pic1','pic2')" onMouseout="turnoff('pic1','pic2')">
<IMG SRC="shoes1.gif" name="pic1" width="100" height="25" border="1">
</A>
<BR>
<IMG SRC="story1.gif" name="pic2" width="100" height="25" border="1">
</BODY>

Well, did you see what we did? Yes, the functions changed. Each function now takes two parameters. Also, when we call the functions from our HTML code, we call them with two parameters.

The Functions

Let's take a look at the lightup() function:

function lightup(imgName,imgName2)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
      imgOn2=eval(imgName2 + "on.src");
      document[imgName2].src= imgOn2;
    }
 }

The function takes in two variables from the outside (parameters). It takes in imgName and imgName2. These will correspond to the names of the images, pic1 and pic2. So, the value of imgName is "pic1" and the value of imgName2 is "pic2". Now, you will see the code we used to change a single image before:

imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;

Those two lines change our first image (pic1).

Now look at the next two lines. Yes, they are identical- except we changed the variable names by adding a 2 on the end of them. This way, the code works on imgName2, which is "pic2", the name of our second image. These lines are what changes the second image:

imgOn2=eval(imgName2 + "on.src");
document[imgName2].src= imgOn2;

Nice, isn't it? The turnoff() function does exactly the same thing in reverse. It switches the images back to normal.

The HTML

Now, we have to call the functions from our link tag around the first image. We use the onMouseover and onMouseout commands for the function calls:

<A HREF="newpage.html" onMouseover="lightup('pic1','pic2')" onMouseout="turnoff('pic1','pic2')">
<IMG SRC="shoes1.gif" name="pic1" width="100" height="25" border="1">
</A>
<BR>
<IMG SRC="story1.gif" name="pic2" width="100" height="25" border="1">

Let's look at the call from the onMouseover command:

onMouseover="lightup('pic1','pic2')"

Notice that it calls the function with two parameters. The first is the name of the top image, "pic1". The second parameter is the name of the bottom image, "pic2" (in the name="pic2" attribute). This allows the function to change both images while the mouse is over the top one. The onMouseout command calls the turnoff() function with the same parameters, so the images change back when the mouse goes away.

Can I do 3 or More?

Yes, just add an extra two lines to both functions like we did above for each additional image, changing the variable names- by adding a 3, 4 and so on- to the end of the variable names. You will also need to add an extra parameter to both functions, and to both function calls in the HTML. So, if you use the script to change 3 images, you would change both of these functions like this:

function lightup(imgName,imgName2,imgName3)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
      imgOn2=eval(imgName2 + "on.src");
      document[imgName2].src= imgOn2;
      imgOn3=eval(imgName3 + "on.src");
      document[imgName3].src= imgOn3;
    }
 }
function turnoff(imgName,imgName2,imgName3)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
      imgOff2=eval(imgName2 + "off.src");
      document[imgName2].src= imgOff2;
      imgOff3=eval(imgName3 + "off.src");
      document[imgName3].src= imgOff3;
    }
 }

Also, don't forget to preload the new images with the others at the beginning of the script. Just add the new image like you did for the others.

Then, you have to change the function calls, and add the extra image to your HTML code:

<A HREF="newpage.html" onMouseover="lightup('pic1','pic2','pic3')" onMouseout="turnoff('pic1','pic2','pic3')">
<IMG SRC="shoes1.gif" name="pic1" width="100" height="25" border="1">
</A>
<BR>
<IMG SRC="story1.gif" name="pic2" width="100" height="25" border="1">
<BR>
<IMG SRC="another1.gif" name="pic3" width="100" height="25" border="1">

Well, try it with 50 images or so- maybe you can drive yourself insane looking for syntax errors through 50 images! Well..maybe not. See what you can come up with, and have fun with multiple rollovers!

Well, let's go on to yet another rollover idea in the next section: JS Rollovers 3.

previous
Previous
By: John Pollock next
Next

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