PageResource.com - Web Development Tutorials

JavaScript Hover Buttons 2

How to create a rollover for a different image

So, you want your script to change a different image when you place your mouse on the first one, or maybe when you place your mouse on a link. Check out the images below. Place your mouse over the top one, and watch the bottom image change!


We are going to see how to do that using the hover button script from the first rollover tutorial, but adding a few modifications. You will need to be familiar with the first hover button tutorial before you proceed.

Here is the script, read through it and see if you can catch the trick that changes a different image than the one the mouse goes over:

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

  if (document.images)
   {
     pic2on= new Image(100,25);
     pic2on.src="story2.gif";
     
     pic2off= new Image(100,25);
     pic2off.src="story1.gif";     
   }

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

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

//-->
</SCRIPT>

</HEAD>

<BODY>

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

So, did you see the trick? Don't worry, if you didn't we'll get to it in no time. First, let's look at how the script gets started:

Detection and Preloading

First, like we did before, we check for the image object:

if (document.images)
{ .. }

Once the that has been checked, we preload the images we need for the mouseover. Notice that we only preloaded the images for the second picture. This is the one we want to change, while the first one stays the same:

  if (document.images)
   {
     pic2on= new Image(100,25);
     pic2on.src="story2.gif";
     
     pic2off= new Image(100,25);
     pic2off.src="story1.gif";     
   }

Now we are ready for the functions.

The Functions

Actually, the functions remained unchanged, except that we used an object detection again in place of browser detection.

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

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

Everything else is the same, we just need to change one image on the mouseover. The trick to making it change a different image comes in the parameter we are going to send the function when we call it. So, on to the HTML code, where we will call the functions.

The HTML: Calling the Functions

Now, we get to the point where we call the functions with the onMouseover and onMouseout commands. We do this when the mouse is over the first image, which we will use as a link to "newpage.html". It could link to anything you want, or nothing at all- but you will need the link tag to call the onMouseover and onMouseout commands. Here is the HTML:

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

Now, notice that the first image is named "pic1", in the name="pic1" attribute of the image tag. The image we want to change is the one below it (the second image tag), which is named "pic2" using name="pic2" in the image tag. Now, look at the link tag that is used for the first image. When it uses the onMouseover command, look at the parameter to the function call:

onMouseover="lightup('pic2')"

Yes, it is telling the function to change 'pic2', which is the other image below it! So, the function performs the work on the second image, and leaves the first image as merely a link, a link that changes the second image while the mouse is over it. The onMouseout command does the same thing, just in reverse. It changes the second image back to normal.

What about a Plain Link?

To use a regular link to change the image, just remove the first image tag in the HTML, and replace it with text, like this:

<A HREF="newpage.html" onMouseover="lightup('pic2')" onMouseout="turnoff('pic2')">
New Page
</A>
<P>
<IMG SRC="story1.gif" name="pic2" width="100" height="25" border="0">

Now, you get something that looks like this:

New Page

This script could be used to display a graphic with text while the mouse is on another image- the graphic could describe where the link will go when it is followed. You could also make some other nifty effects, try it out and see what you can come up with!

Well, that's it for now, let's go on to: JS Hover Buttons 3: Multiple Images.

previous
Previous
By: John Pollock next
Next

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