AJAX

JS Rollover in Firefox

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2008

Posts: 27

Reputation: xylude is an unknown quantity at this point

Solved Threads: 0

xylude

Offline

Light Poster

JS Rollover in Firefox

Jul 12th, 2009

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
 
function swapImage(image)
	{
		bakeryImage.src=image;
	}
 
 </script>
<script type="text/javascript">

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

And in the body:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 <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>
 <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)

•

Join Date: May 2008

Posts: 27

Reputation: xylude is an unknown quantity at this point

Solved Threads: 0

xylude

Offline

Light Poster

Re: JS Rollover in Firefox

Jul 12th, 2009

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

•

Join Date: Jul 2008

Posts: 14

Reputation: burgercho is an unknown quantity at this point

Solved Threads: 1

burgercho

Offline

Newbie Poster

Re: JS Rollover in Firefox

Jul 12th, 2009

You should use

Help with Code Tags

javascript Syntax (Toggle Plain Text)

document.bakeryImage.src=image

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Re: JS Rollover in Firefox

Jul 12th, 2009

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
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;
}
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;
}