CSS/Javascript problem

Setting up CSS menu with Javascript elements

[Matt_G]

I'm trying to set up a CSS/Javascript menu with submenus but the main menu image button blanks out whenever I roll over it. Any ideas what the problem might be?

 <li><a class="qmparent" href="javascript:void(0)"><img class="qm-is qm-ia" src="Products.png" width="107" height="45" onmouseover = this.src="ProductsMouseOver.png" width="107" height="45"></a> 
<ul> 
<li><span class="qmtitle" >Main Products</span></li> 
<li><a href="javascript:void(0)">60m</a></li> 
<li><a href="javascript:void(0)">150m</a></li> 
<li><a href="javascript:void(0)">600m</a></li> 
<li><a href="javascript:void(0)">Technical specifications</a></li> 
<li><a href="javascript:void(0)">Backpack with semi</a></li> 
<li><a href="javascript:void(0)">Backpack with closed</a></li> 
<li><a href="javascript:void(0);">Mouthpiece</a></li> 
<li><a href="javascript:void(0);">Regulator</a></li> 
<li><a href="javascript:void(0);">Monitoring</a></li> 
<li><a href="javascript:void(0);">Buying a system</a></li> 
</ul></li> 

[whoisgregg]

Welcome to WebmasterWorld, Matt_G!

It may be how the onmouseover is set... Better to wrap the entire onmouseover with double quotes and use single quotes to wrap the strings. Like so:

onmouseover="this.src='ProductsMouseOver.png';" 

[rocknbil]

And move your mouseover actions to the anchor [webmasterworld.com], or go with a CSS solution using background images.