<<< Home << Web < Rollovers Top Bottom < Prev Next >

Javascript Rollovers

Changing an Image
From Separate Links

Contents of this page

You can use these links to scroll to individual topics

Code in the <head> section
Changing an image from separate links
Variations

Code in the <head> section

For this example, we need the usual things in the head section: preloadImg(), swapImg(), and the code to preload the images. The version of swapImg() here is a bit different from the one we've been using: it lets you pass more than one set of image names and preloaded image object names so that you can swap two or more images at the same time. 

<script type="text/javascript" language="javascript"> <!--

//====================================================
// preloadImg() - Preloads an image
//
// Argument: String containing URL of image to preload
// Returns:  Image object created for the image
// Author:   Larry Coats
//====================================================
function preloadImg (zsUrl)
{
  // Prevent alerts in IE 3 and Netscape 2
  if (!document.images) return null;

  // Create an image object and preload the image
  var xo = new Image();   // Create the image object
  xo.src = zsUrl;         // Set URL - Preloads
  return xo;              // Return the image object
}

//====================================================
// swapImg() - Swaps one or more images
//
// Arguments:
//   One or more pairs of strings:
//     Name in <img> tag
//     Name of preloaded image
// Author:   Larry Coats
//====================================================
function swapImg ()
{
  // Count number of name pairs passed
  var xiNumPairs = Math.floor(arguments.length / 2);

  // Prevent alerts in IE 3 and Netscape 2
  if (!document.images) return;

  // Prepare to do rollovers
  var xsImg, xsPre;   // Receives a pair of arguments
  var xiArg = 0;      // Counts arguments

  // Loop - Once per pair of arguments passed
  var xiLoop;
  for (xiLoop = 0 ; xiLoop < xiNumPairs ; ++xiLoop)
  {
    // Fetch the pair of arguments
    xsImg = arguments[xiArg++];
    xsPre = arguments[xiArg++];

    // Swap the image
    eval ("document." + xsImg + ".src = " + xsPre + ".src");
  }
}

//====================================================
// Preload the images
//====================================================
var gmTrans  = preloadImg ("transdot.gif");
var gmBotBlu = preloadImg ("botblue.jpg");
var gmBotRed = preloadImg ("botred.jpg");
var gmBotScr = preloadImg ("botscr.gif");
var gmTopBlu = preloadImg ("topblue.jpg");
var gmTopRed = preloadImg ("topred.jpg");
var gmTopScr = preloadImg ("topscr.gif");
//--> </script>

Changing an image from separate links

In the rollovers we've seen so far, the onmouseover and other attributes are used for replacing an image as the mouse cursor is moved over or clicked on an image. It's also possible to replace one image when the mouse interacts with a different image or text link on the page.

In this example, there is a large image that's normally invisible. There are two text links ("Top" and "Bottom"). When the mouse runs over one of these text links, a more detailed description of the link appears in the large image.

There are also two buttons ("Top" and "Bottom"). When the mouse runs over one of these, two things happen: (1) a simple rollover like the ones we've already seen is applied to the image that the mouse is over, and (2) a more detailed description of the link appears in the large image.

Big image Top     Bottom

Top Bottom 

<!-- The big image -->
<img src="transdot.gif" width="264" height="92"
     hspace="25" align="left" id="imBig" name="imBig" alt="Big image" />

<!-- The "Top" and "Bottom" text links -->
<a href="#top"
   onmouseover="swapImg ('imBig', 'gmTopScr');"
   onmouseout="swapImg ('imBig', 'gmTrans');">Top</a>
&nbsp; &nbsp;
<a href="#bottom"
   onmouseover="swapImg ('imBig', 'gmBotScr');"
   onmouseout="swapImg ('imBig', 'gmTrans');">Bottom</a>
<br /><br />

<!-- The "Top" and "Bottom" image links -->
<a href="#top"
   onmouseover="swapImg ('imBig', 'gmTopScr', 'imTop', 'gmTopRed');"
   onmouseout="swapImg ('imBig', 'gmTrans', 'imTop', 'gmTopBlu');">
  <img src="topblue.jpg" width="100" height="50"
       hspace="10" border="0" id="imTop" name="imTop" alt="Top" /></a>
<a href="#bottom"
   onmouseover="swapImg ('imBig', 'gmBotScr', 'imBot', 'gmBotRed');"
   onmouseout="swapImg ('imBig', 'gmTrans', 'imBot', 'gmBotBlu');">
  <img src="botblue.jpg" width="100" height="50"
       hspace="10" border="0" id="imBot" name="imBot" alt="Bottom" /></a>

Variations

There are many variations that you can try.

You probably won't have both text links and image links changing the same image the way I've done here. You'll probably be using just one or the other most of the time.

I've used a transparent image to begin with. You could, of course, have a visible image as your starting image, and substitute others from the various links.

I've shown two text links and two image links. You can, of course, have as many of these as you want. Just remember that all of the images that substitute for the same image have to be the same size, or the browser will resize them and they may not look good.

You could easily have your links change more than one image on the page. You can substitute images for any <img> tag that has a name attribute. You can change three or four or more images in a single swapImg() call.


<<< Home << Web < Rollovers Top Bottom < Prev Next >