Try using this simple mouseOver code. It's well documented and very versatile. You can use it to switch any image on your page from any anchored element.
Joe
Code:
<html>
<head>
<!--Scripts by Joe Eliason. You can use this script freely as long as this comment stays
intact with the code. Any questions or comments please email me at papito@yahoo.com.-->
<script type="text/javascript" language="javascript">
<!--
//Roll over commands//
//command for mouseOver
function on_img(loc,img)
{
loc.src=menuimg[img].src;
}
//command for mouseOut...Same function as on_img. Can use one or both functions, works the same.
function off_img(loc,img)
{
loc.src=menuimg[img].src;
}
//Define and setup image array: (your variable)menuimg = new Array (2) <-- the number of images in the array
menuimg = new Array(2);
//List your images in the array.//
//FIRST IMAGE
//The first line (menuimg[0]= new Image (42,499);) defines it as an Image with its width and height
menuimg[0]= new Image (42,499);
//The second line (menuimg[0].src="Images/lineBar0.gif";) defines the image source location
menuimg[0].src="Images/lineBar0.gif";
//SECOND IMAGE
menuimg[1]= new Image (42,499);
menuimg[1].src="Images/lineBar1.gif";
//add more arrays just like above for more images
//-->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" id=all>
<table align="left" border=0 cellpadding=0 cellspacing=0>
<tr>
<td rowspan=1 colspan=1 width=183 height=34>
<!--On the onMouseOver command run the function from the above script...on_img(imageName,Array Number);-->
<!--Use the [self.status'']command for text in the status bar at the bottom. Leave blank for no text.-->
<!--On the onMouseOut command run the "off_img()" command to return to to the orriginal image.-->
<a href="directoryIndex.html" onmouseover="on_img(lineBar,1);on_img(directory,10);self.status='Company Directory';return true"onmouseout= "off_img(directory,11);self.status='';return true">
<!--Give you image a name to be refered by (name="whatever"-->
<img src="Images\directory1.gif" name="directory" width=183 height=34 border=0></td>
</tr>
<!--Your image name must be the same as the name you put in the anchor
tag command [onMouseOut="on_image(imageName,Array Number)] associated
with the image you want to switch. If you put a different image name
in the anchor tag mouseOver command you will switch the image with that
name. Play around with it. -->
</table>
</body>
</html>
Bookmarks