Creating a Menu Using Image Swapping with Javascript

One of the more popular javascript tricks is swapping images – or replacing one image with another when you move your mouse over another image. I've used code originally generated by Macromedia Dreamweaver, and located for your perusal on the Webdeveloper.com site, on both the English Department and Writing Center sites. You can see an example of it on the bottom of this page – simply run your mouse over the menu buttons and watch them change color.

Swapping images is a nifty trick. It makes your site more dynamic and, more importantly, calls attention to the links represented by the images that are being changed. The basic principles behind swapping images are fairly straightforward:

The two images that are swapped must have the same dimensions (height and width)
You need to use onmouseover and onmouseout
To reduce load time for each image, you should preload your images
Image swapping works only on more recent browsers. The code I am using here does not work, for instance, on Netscape 2.x.

Below, I illustrate how this works using the English Department menu.

The Scripts

In the head of your document, place the scripts that define the functions for preloading, swapping, and restoring your images. These are the Macromedia Dreamweaver scripts I use:

<HEAD>
   <TITLE>Menu</TITLE>
   
  <SCRIPT language="JavaScript">

<!--

function MM_preloadImages() { //v1.2

  if (document.images) {

    var imgFiles = MM_preloadImages.arguments;

    var preloadArray = new Array();

    for (var i=0; i<imgFiles.length; i++) {

      preloadArray[i] = new Image;

      preloadArray[i].src = imgFiles[i];

    }

  }

}

function MM_swapImage() { //v1.2

  var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;

  for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {

    objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];

    if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||

        (objStr.indexOf('document.all[')   ==0 && document.all   ==null))

      objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);

    obj = eval(objStr);

    if (obj != null) {

      swapArray[j++] = obj;

      swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];

      obj.src = MM_swapImage.arguments[i+2];

  } }

  document.MM_swapImgData = swapArray; //used for restore

}

function MM_swapImgRestore() { //v1.2

  if (document.MM_swapImgData != null)

    for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)

      document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];

}

//-->

</SCRIPT>

</HEAD>

Immediately after the body tag, you should insert the code that preloads the images that will appear when you move your mouse over the initial image (that is, the image that appears when the page is first loaded). To make things easier for me to remember, I have named my images using a common name followed by an underscore and the color of the image, e.g., home_white.gif and home_yellow.gif.

<BODY>

<!-- #BeginBehavior MM_swapImage20 --> 

<SCRIPT language='JavaScript'>

  MM_preloadImages('graphics/buttons/english_home_yellow.jpg');

  MM_preloadImages('graphics/buttons/courses_yellow.jpg');

  MM_preloadImages('graphics/buttons/programs_yellow.jpg');

  <EM>... and so </EM>

</SCRIPT>

Finally, you should insert the code that you will use to build your menu. For illustration purposes, I've only shown one part of the menu code.:

Note how this code is constructed:

The URL
The target for the frame, if any
The onMouseOver code, which tells which image to display when the mouse cursor moves over the image
The onMouseOut code, which tells the browser to restore the original image
The code for the original image, with the NAME of the image specified

This code generates the following menu. (Note: I've set the links back to this page, so you can see how the code works without needing to leave this page.) I've created the effect of a button being depressed by brightening the bevels on the buttons, by changing the color of the text, and by lowering the relative height of the text on the swapped (yellow) image by a single pixel.

Links Page: Learn more about Javascript on the Javascript links page.

Coding Primer: Learn more about Javascript in Using Javascript.

Writing Guides

Writing for the Web

Creating a Menu Using Image Swapping with Javascript

The Scripts