Rollover image swap function

JavaScript
1

Hey Everyone, I am trying to write a simple function that will apply a rollover function to certain images. It seems that the onmouseover and onmouseout functions get registered to their appropriate images, but when you roll your mouse over the first or second image, it swaps the image out with the id of hm3 and that’s it. Any help would be great. Thanks in advance!


var mouseovers = new Array();
mouseovers['hm1'] = 'site_images/this_site/hp-water-hover.png';
mouseovers['hm2'] = 'site_images/this_site/hp-mold-hover.png';
mouseovers['hm3'] = 'site_images/this_site/hp-fire-hover.png';


function ImageSwap() {
	var data = mouseovers;
	
	for ( var i in data )
{
   
  
   
   if (document.getElementById(i) != null) {
   
    var OldImg = document.getElementById(i).src;
   
   document.getElementById(i).onmouseover = function() {
				
				
				document.getElementById(i).src = data[i];
					
					
				
				}/*end onmouserover*/
				
				
				document.getElementById(i).onmouseout = function() {
				
				document.getElementById(i).src = OldImg;
					
				
				}/*end onmouserover*/
				
				
  }/*End if document exists*/
   
   
}/*end forloop*/

/*Allow multiple onload events*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

/*load it up*/
addLoadEvent(ImageSwap);





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Untitled Page</title>
		<script type="text/javascript" src="js/mouseovers.js"></script>

	</head>

	<body bgcolor="#ffffff">
		<img id="hm1" src="site_images/this_site/hp-water.png" alt="Water Damage" style="border:0; width:250px; height:128px"/>
		<img id="hm2" src="site_images/this_site/hp-mold.png" alt="Water Damage" style="border:0; width:250px; height:128px"/>
		<img id="hm3" src="site_images/this_site/hp-fire.png" alt="Water Damage" style="border:0; width:250px; height:128px"/>
	</body>

</html>
2

Yeah that does make much more sense. I would still like to know why the above code is not working, but sprites seem like a better solution.

3

Although, this does not “fix” your current code, have you considered using <a> tags with image sprites rather than Javascript? It would not only improve the performance of your site, but would also render as you want even when Javascript is disabled.