JS Rollover in Firefox

[xylude]

I am pretty new with javascript, and I am making a page that has divs that change an image when rolled over. It works in Live View in Dreamweaver, and in Safari (couldn't test in IE because I'm on a Mac), but not in Firefox.

Here's what I got in the Head section:

<script type="text/javascript">

function swapImage(image)
	{
		bakeryImage.src=image;
	}
	
 </script>

And in the body:

<div class="bodyInner">
    
    <div class="bodyInner_Left">
      <div class="menuItem" onmouseover="swapImage('images/foodPix/bread.jpg')">Bread</a></div>
      <div class="menuItem" onmouseover="swapImage('images/foodPix/pastries.jpg')">Pastries</div>
      <div class="menuItem" onmouseover="swapImage('images/foodPix/cookies.jpg')">Cookies</div>
      <div class="menuItem" onmouseover="swapImage('images/foodPix/cake.jpg')">Cakes</div>
      <div class="menuItem" onmouseover="swapImage('images/foodPix/tea.jpg')">Tea &amp; Coffee</div>
    </div>
    
    <div class="bodyInner_Right"><img src="images/foodPix/cookies.jpg" width="730" height="469" name="bakeryImage" id="bakryImage" /></div>
  </div>
  
</div>

You can see the whole source at www.samscookiejar.com ( my wife's bakery. Page is still under major construction)

[xylude]

Oh yea, I did fix the typo in the id field of the image. Still no luck.

[burgercho]

You should use

document.bakeryImage.src=image

[Airshow]

Xylude,

I'm amazed that bakeryImage.src=image; works in any browser! I can only think it's picking up on the name attribute rather than the id. Names are more liberally interpreted.

Try this - three goes in one line for good cross-browser compatibility plus the safety of setting null if they all fail:

function swapImage(image){
	var bakImg = (document.getElementById) ? document.getElementById('bakeryImage') : (document.images) ? document.images['bakeryImage'] : (document.all) ? document.all['bakeryImage'] : null;
	if(bakImg) bakImg.src = image;
}

Should work in all major browsers.

Airshow