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.