943,584 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > JS Rollover in Firefox
Ad:
Permalink
Jul 12th, 2009
0

JS Rollover in Firefox

Expand Post »
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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2.  
  3. function swapImage(image)
  4. 	{
  5. 		bakeryImage.src=image;
  6. 	}
  7.  
  8.  </script>


And in the body:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  <div class="bodyInner">
  2.  
  3.     <div class="bodyInner_Left">
  4.       <div class="menuItem" onmouseover="swapImage('images/foodPix/bread.jpg')">Bread</a></div>
  5.       <div class="menuItem" onmouseover="swapImage('images/foodPix/pastries.jpg')">Pastries</div>
  6.       <div class="menuItem" onmouseover="swapImage('images/foodPix/cookies.jpg')">Cookies</div>
  7.       <div class="menuItem" onmouseover="swapImage('images/foodPix/cake.jpg')">Cakes</div>
  8.       <div class="menuItem" onmouseover="swapImage('images/foodPix/tea.jpg')">Tea &amp; Coffee</div>
  9.     </div>
  10.  
  11.     <div class="bodyInner_Right"><img src="images/foodPix/cookies.jpg" width="730" height="469" name="bakeryImage" id="bakryImage" /></div>
  12.   </div>
  13.  
  14. </div>

You can see the whole source at www.samscookiejar.com ( my wife's bakery. Page is still under major construction)
Similar Threads
Reputation Points: 13
Solved Threads: 11
Junior Poster
xylude is offline Offline
122 posts
since May 2008
Permalink
Jul 12th, 2009
0

Re: JS Rollover in Firefox

Oh yea, I did fix the typo in the id field of the image. Still no luck.
Reputation Points: 13
Solved Threads: 11
Junior Poster
xylude is offline Offline
122 posts
since May 2008
Permalink
Jul 12th, 2009
0

Re: JS Rollover in Firefox

You should use
javascript Syntax (Toggle Plain Text)
  1. document.bakeryImage.src=image
Reputation Points: 26
Solved Threads: 11
Light Poster
burgercho is offline Offline
47 posts
since Jul 2008
Permalink
Jul 12th, 2009
0

Re: JS Rollover in Firefox

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function swapImage(image){
  2. 	var bakImg = (document.getElementById) ? document.getElementById('bakeryImage') : (document.images) ? document.images['bakeryImage'] : (document.all) ? document.all['bakeryImage'] : null;
  3. 	if(bakImg) bakImg.src = image;
  4. }
Should work in all major browsers.

Airshow
Sponsor
Reputation Points: 300
Solved Threads: 357
WiFi Lounge Lizard
Airshow is offline Offline
2,522 posts
since Apr 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: numeric class doesn't work
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Showing local time and timezone





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC