JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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 xylude is offline Offline
Light Poster

JS Rollover in Firefox

 
0
  #1
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:

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)
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 27
Reputation: xylude is an unknown quantity at this point 
Solved Threads: 0
xylude xylude is offline Offline
Light Poster

Re: JS Rollover in Firefox

 
0
  #2
Jul 12th, 2009
Oh yea, I did fix the typo in the id field of the image. Still no luck.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 14
Reputation: burgercho is an unknown quantity at this point 
Solved Threads: 1
burgercho burgercho is offline Offline
Newbie Poster

Re: JS Rollover in Firefox

 
0
  #3
Jul 12th, 2009
You should use
javascript Syntax (Toggle Plain Text) 
  1. document.bakeryImage.src=image
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 831
Reputation: Airshow is on a distinguished road 
Solved Threads: 119
Airshow's Avatar
Airshow Airshow is offline Offline
Practically a Posting Shark

Re: JS Rollover in Firefox

 
0
  #4
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:

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
50% of the solution lies in accurately describing the problem!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser captchaformproblem cart child close codes column css date debugger decimal dependent design disablefirebug dom download element embed engine enter error events ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp jump libcurl listbox maps masterpage math media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover onreadystatechange paypal pdf php player position post problem programming prototype redirect safari scale scriptlets scroll search security select software sql toggle unicode variables w3c web website window windowofwords \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC