|
|
 |
|
Scripting for 5th Generation Browsers - Part 1
|
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 future it is unlikely that the name attribute will be supported, hence it is important to understand the concepts presented here.
<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 Nescape6 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 to W3C document.getElementById() method.
In this particular instance, we want to collect the id value of test2img by
referencing it with the following syntax document.getElementById("test2img").
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 what is occurring
at 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>
View exampleLet'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 ?
Copyright ©2000-2002 DHTMLCentral.com, Bratta Communications. All rights reserved. |