Rough Guide To The DOM (part 2) - Making The Swap() (
Page 2 of 8 )
The first item on the
agenda today is an illustration of how you can use the DOM to accomplish one of
the most popular dHTML applications - the image swap. Take a gander at the
following HTML document:
<html>
<head>
</head>
<body>
<a href="http://www.melonfire.com/" onMouseOver="javascript:imageSwap();"
onMouseOut="javascript:imageSwap();"><img id="logo" src="logo_n.gif"
width=50 height=50 border=0></a>
</body>
</html>
Now, I've set this up so that "mouseover" and "mouseout"
events on the image are handled by the JavaScript function imageSwap(). This
function is responsible for swapping the image each time an event occurs - so
let's take a look at it.
<script language="JavaScript">
var normal = "logo_n.gif";
var hover = "logo_h.gif";
function imageSwap()
{
var imageObj = document.getElementById("logo");
var imageSrc = imageObj.getAttribute("src");
if (imageSrc == normal)
{
imageObj.setAttribute("src", hover);
}
else
{
imageObj.setAttribute("src", normal);
}
}
</script>
If you remember what I taught you last time, none of this
should come as a surprise. I've first defined the "normal" and "hover" state
images, and then created a function called imageSwap(), which is called whenever
the mouse moves over and out of the image.
The imageSwap() function
obtains a reference to the image via its ID, and then obtains the current value
of the image's "src" attribute. It then checks the value against the values of
the "normal" and "hover" variables, and changes the image source appropriately.
This article
copyright Melonfire 2001. All rights
reserved.
/ 5 
