Scripting for 5th Generation Browsers and Beyond

Four State DOM Rollovers with a Single Image

Remember that earlier I stated that the setAttribute() method allows for the setting of any attribute such as width and height? Well, let's use these attributes to create a four state rollover with just a few lines of code and a single image. First the image tag:

<img src="button_eddie.png" id="Image1" border="0" 
     width="25'" height="25'">

As noted previously, what is important in the above tag is to set a unique id for the image so that we can later retrieve the image element via the document.getElementById() method. The rollover script we employ to put this into action is as follows: (live example)

<script language="JavaScript" type="text/javascript">
function rollOvers(id, new_width, new_height) {
document.getElementById(id).setAttribute('width', new_width);
document.getElementById(id).setAttribute('height', new_height);
 }
</script>

In this example, we utilize three arguments, id, new_width and new_height. The id argument is used to retrieve the unique id of the image, in this instance image1, and the new_width and new_height arguments will be used from the event handler to set new image dimensions.

<a href="#" onClick="rollOvers('Image1','28','28')" 
            onMouseOver="rollOvers('Image1','26','26')" 
            onMouseOut="rollOvers('Image1','24','24') ">

Let's consider what is occurring here for a moment. We have enabled four image dimensions for a single image. Effectively, we have produced a four state disjointed rollover. The four states are:

1. The initial dimensions of 25*25.
2. The onMouseOver dimensions of 26*26.
3. The onMouseOut dimensions of 24*24.
4. The onClick dimensions of 28*28.

Netscape Rollover Fix

Before you all start screaming at me with complaints that rollovers don't work properly in Netscape 6 because of a refresh bug, let me make the point that the thing with Web development is to find solutions to these types of problems wherever possible. Sometimes no solution exists and as Web developers we have to wear that, but on many occasions solutions do exist, provided we start to think out of the box. Luckily, such a solution exists for the Netscape 6 refresh bug and rollovers.

To fix the rollover problem in Netscape 6 two things need to occur.

Use a timer to force the rollovers, e.g.

function forceIt(){
   setTimeout("swapImage()",1);
}

and to fix the refresh bug use onResize="history.go(0)" in the body tag. Note that this fix doesn't apply to Netscape 6.1+ or Mozilla builds after 0.8.