image-swap

This article discusses Image Swaps; a popular trick found on many web pages but seldom found in books. You may have seen a page with images that light up when you move a mouse over them. Some pages have grayed out images that become colored when your mouse hovers over them. The code behind these tricks is generally called an image swap.

To understand image swaps you need to have some basic knowledge of events, specifically onMouseOver() and onMouseOut(), as you may have guessed from the previous paragraph.

Compatibility Issues

Before I go any further I would like to inform you that image swaps are not compatible with browsers that are older than Netscape Navigator 2.2 and Microsoft Internet Explorer 4.0. Although with the advent of MS IE 5.1 and Netscape Navigator 4.72, you can safely ignore the compatibility issue, but some visitors might be using older browsers and your page will not behave as expected.

Ground Work

OK! Let’s start. The basic idea behind an image swap is to have two separate images – one the dark or grayed out one and the other a colored lighten up image. The next step is to display the dark or grayed out image with an <IMG> tag. You will have to keep the <IMG> tag inside a <A HREF="..."> tag. This is so because we have to use onMouseOver() and onMouseOut() which can only be done in an href. Thus, the work left is to display the grayed out image in an onMouseOut() while a colored light image in onMouseOver().

Suppose you have a grayed out and a colored submit image, I would recommend you to name them as sumbita.gif and submitb.gif, respectively. This will help us in handling multiple image swaps on the same page.

Naming Images

We give name to things whenever we have to refer to them. That is true for JavaScript objects, too. Thus, we will name our images so that they can be easily referred. Suppose you have a grayed out image in a file submita.gif; referring to your page index.html; and you want to give it the name submit for easy reference. This can be done as shown below:

<a href="index.html" onMouseOver="lighten('submit')" onMouseOver="darken('submit')">
<img src="submita.gif" name="submit" border="0">
</a>
.

Although not apparent here, naming like this will greatly help us. Keep one thing in mind, if you want to follow the code given here, you must use the naming convention.

Lighten Up

Yes, that’s the next thing to do. As we have established a convention about the image names, we can easily tell the colored image name if we are given with the image name. For example, if you tell me that the name of your image (not image file) is submit, I can easily infer that the file name for the grayed out one is submita.gif and that for the colored one is submitb.gif. So our lighten() function makes use of this technique:

function lighten (imgName)
{
imageOn = imgName + "b.gif";
document[imgName].src = imageOn;
}

You may have noticed one thing that you don’t know – document[imgName].src. Interpreting it is not as difficult as it seems: In JavaScript, the current web page is referred to as document. A document is a collection of text, links and images. To refer to one of these elements in the document, we use square brackets. Thus, document[imgName] means the imgName element of the current page (that is our submit image). The src stands for “source”, that is the file name for the image. Using this, we can change the filename of the image at run time; that is, when the mouse moves over the image. Pretty smart, right?

Darken

Some people might not like the name, but that’s what I use. So here is the code for this function:

function darken (imgName)
{
imgOff = imgName + "a.gif";
document[imgName].src = imageOff;
}

Sample Code

This is our final example – a fully working image swap. This code assumes that you have two images named submita.gif and submitb.gif in your current working directory. There is no other dependency.

<html>
<head>
<title>Image Swaps</title>
<script language="JavaScript">
<!-- Hiding

function lighten (imgName)
{
imageOn = imgName + "b.gif";
document[imgName].src = imageOn;
}

function darken (imgName)
{
imageOff = imgName + "a.gif"
document[imgName].src = imageOff;
}
// done -->
</script>
</head>

<body>
<a href="index.html" onMouseOver="lighten('submit')" 
 onMouseOut="darken('submit')">
<img src="submita.gif" name="submit" border="0">
</a>
</body>
</html>

Some Improvements

First of all, see that we can add multiple image swaps in the same page. For example, if we had another set of images – abouta.gif and aboutb.gif – the body part of our last example would have been:

<body>
<a href="index.html" onMouseOver="lighten('submit')" 
 onMouseOut="darken('submit')">
<img src="submita.gif" name="submit" border="0">
</a><br>
<a href="about.html" onMouseOver="lighten('about')" 
 onMouseOut="darken('about')">
<img src="abouta.gif" name="about" border="0">
</a>
</body>

Secondly, you may find a better way to manage this if you know arrays. However, I wanted to keep my discussion as simple as possible. Those who know arrays can easily make use of them in image swaps and those who do not: don’t despair I will cover arrays in one of my next articles. A creative way of using image swaps can be seen on the Internet.

Leave a Reply

Your email address will not be published.