Scripting for 5th Generation Browsers and Beyond

Rollover Fun with setAttribute()

In IE5+ and NS6 there is new way to swap images for rollover effects that is W3C DOM based. The golden rule to follow is out with the name attribute and in with the id attribute. For those of you that are not aware, the current W3C recommendation is to use the id attribute, even though browsers still currently will perform rollovers by using the name attribute as we have become accustomed to. But please note that in the future it is unlikely that the name attribute will be supported, hence it is important to understand the concepts presented here.

In the following example we will return to the document.getElementById() method and also introduce the concept of setting attributes via the setAttribute() method. Let's begin by taking a look at the script: (live example)

<script language="JavaScript" type="text/javascript">
img1src = new Image();
img1src.src = "button2.jpg";
img2src = new Image();
img2src.src = "button1.jpg";
function swapImage(){
theImg=document.getElementById("test2img");
theImg.setAttribute("src","button2.jpg");
}
function restoreImage(){
theImg=document.getElementById("test2img");
theImg.setAttribute("src","button1.jpg");
}
</script>

The first part of the script is a routine preload method so that the images that are going to be used for rollovers are loaded into the cache. Luckily, both Internet Explorer and Nescape 6 pull the images from the cache by default, so this saves us hooking up the preload variables into the script. Apart from that there isn't a lot here that we aren't used to.

It is when we begin to look at the swapImage() function that differences from past methods occur. First we create a variable theImg which then gets assigned via the W3C document.getElementById() method. In this particular instance, we want to collect the id value of test2img. In order to achieve this we use the following line of code:

theImg=document.getElementById("test2img");

Now that the image is collected and referenced we can start having some fun with it by using the W3C setAttribute() command. setAttribute() allows us to define any attribute of an element, for example height or width. In this example we are going to set the src attribute.

theImg.setAttribute("src","button2.jpg");

setAttribute() allows us to define the src of the image and consequently set the new src value of the image. In this particular example, button1.jpg will be replaced with button2.jpg with a mouseOver event. To swap the image back to its original state we use the restoreImage() function. Our event handlers would then look like this:

<a href="#" onMouseOver="swapImage()" 
            onMouseOut="restoreImage()"> <img src="button1.jpg" 
            width="38" height="25" border="0" id="test2img"></a>

Note the use of id="test2img" in the image tag. This is how the document.getElementById() method identifies that this is where to apply the script to.

But wait it gets better! The same effect can be accomplished with a single line of code by using two arguments.

function swapImage(id, imgsrc) {
 document.getElementById(id).setAttribute('src', imgsrc);
}

Our arguments can be used to identify what the id of the image is and what its new src value will be. To understand this a bit better take a close look at the new structure of the the event handlers in the image tag.

<a href="#" onMouseOver="swapImage('img1', 'on.jpg')" 
            onMouseOut="swapImage('img1', 'off.jpg')"> <img id="img1" 
            src="off.jpg" width="59" height="59" border="0"></a>

Let's use the onMouseOver event handler to better comprehend what is occurring.

onMouseOver="swapImage('img1', 'on.jpg')"

We identify the id attribute with img1 by using the argument id in our swapImage() function. Next, the new src value of on.jpg is identified by utilizing the imgsrc argument The onMouseOut event handler uses the same logic but just swaps the image to off.jpg. It doesn't get much sweeter than this folks! Or does it?