Question : rollover image not working

I have placed a roll over image in a css based drop down menu. The top image will only change to its roll-over state if the cursor is placed at the very top of the image. Here is the page:

http://www.robinbenzle.com/menutest.html

any ideas what is causing this? Thanks.

Here is the CSS code and the page code is below.
/* Begin CSS Drop Down Menu */

#menuh-container
      {
      position: absolute;            
      top: 1em;
      left: 1em;
      }

#menuh
      {
      font-size: small;
      font-family: arial, helvetica, sans-serif;
      width:780px;
      float:left;
      background-image: none;
      margin: 0px;
      text-align: left;
      }
            
#menuh a
      {
      text-align: center;
      display:block;
      border:0px;
      background-color: black;
      white-space:nowrap;
      margin:0;
      padding:0px;
      }
      
#menuh a:link, #menuh a:visited, #menuh a:active      /* menu at rest */
      {
      color: white;
      text-decoration:none;
      background-image: none;
      background-repeat: no-repeat;
      background-color: #GGGGGG;
      }
      
#menuh a:hover      /* menu at mouse-over  */
      {
      color: white;
      text-decoration:none;
      }      
      

#menuh ul
      {
      list-style:none;
      margin:0;
      padding:0;
      float:left;
      /*width:100px;       width of all menu boxes */
      }
      
.spacer {
      width: 10px;
}

      

#menuh li
      {
      position:relative;
      min-height: 20px;                   /* Sophie Dennis contribution for IE7 */
      vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
      background-image: none;
      margin:0px;
      padding:0px;
      }

#menuh UL, LI  {margin:0px; padding:0px;}

#menuh IMG  { margin:0px; padding:0px; border:0px }

#menuh ul ul
      {
      position:absolute;
      z-index:500;
      top:auto;
      display:none;
      padding: 1em;
      margin:-1em 0 0 -1em;
      }

#menuh ul ul ul
      {
      top:0;
      left:100%;
      }

div#menuh li:hover
      {
      cursor:pointer;
      z-index:100;
      }

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */
 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:

Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<br />

<style type="text/css" media="screen"> @import url("menuh.css"); </style>

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
</head>

</head>

<body onload="MM_preloadImages('buttonblog.jpg','buttonfoodblog.jpg','buttontravelblog.jpg')">

<div id="menuh-container">
<div id="menuh">
	<ul>
		<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blogs','','buttonblog.jpg',1)"><img src="buttonbloglt.jpg" alt="blogs" name="blogs" width="72" height="20" border="0" id="blogs" /></a>
		<ul>
			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('food blog','','buttonfoodblog.jpg',1)"><img src="buttonfoodbloglt.jpg" alt="food blog" name="food blog" width="72" height="20" border="0" id="food blog" /></a></li>
			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('travel blog','','buttontravelblog.jpg',1)"><img src="buttontravelbloglt.jpg" alt="travel blog" name="travel blog" width="72" height="20" border="0" id="travel blog" /></a></li>
		</ul>
		</li>
	</ul>
	

		
</div> 	
<!-- end the menuh-container div -->  
</div>	<!-- end the menuh div --> 


</body>
</html>

Answer : rollover image not working

Check this : http://www.visop-dev.com/uploads/3/1/3/8/313814/jquery.sheet.html

main page : http://plugins.jquery.com/project/sheet
Random Solutions  
 
programming4us programming4us