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

Rollovers not working in FF/Chrome, but IE is okay.

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

•
•
Join Date: Aug 2009
Posts: 5
Reputation: vairvixen is an unknown quantity at this point 
Solved Threads: 0
vairvixen vairvixen is offline Offline
Newbie Poster

Rollovers not working in FF/Chrome, but IE is okay.

 
0
  #1
Aug 29th, 2009
I'm really new at JavaScript, but I thought an image map with rollover images would be a relatively basic feat...

I have a large map with hotspots over individual states. I want the user to hover over a hotspot and for the main image to change, displaying information for that particular state. I've tried code that other developers have sworn works in all browsers, but still can't get the same functionality in FF or Chrome as I do in IE.

The last thing I tried was ...

In the head tag...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. <SCRIPT language="javascript" type="text/javascript">
  3.  
  4. function swapImage(image) {
  5. 	var Map = (document.getElementById) ? document.getElementById('MapWest') : (document.images) ? document.images['MapWest'] : (document.all) ? document.all['MapWest'] : null;
  6. 	if(Map) Map.src = image;
  7. 	}
  8.  
  9. </SCRIPT>

And in the body...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. <img id="MapWest" src="images/map/MapWest_NowServing.png" alt="" name="MapWest" height="508" width="700" usemap="#MapWest_NowServing" border="0"><map name="MapWest_NowServing"><a href="javascript:void(0)" onmouseover="swapImage('images/map/MapWest_WA.png')" onmouseout="swapImage('images/map/MapWest_NowServing.png')"><area title="Washington" shape="rect" coords="73,9,160,70" href="#" alt=""></a></map>

Is anyone able to tell me what I'm doing wrong/missing?

Thank you very much in advance!
Last edited by vairvixen; Aug 29th, 2009 at 7:43 pm. Reason: Needed to add code tags... noob mistake.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Rollovers not working in FF/Chrome, but IE is okay.

 
0
  #2
Aug 29th, 2009
•
•
•
•
Originally Posted by vairvixen View Post 
<SCRIPT language="javascript" type="text/javascript">

function swapImage(image) {
	var Map = (document.getElementById) ? document.getElementById('MapWest') : (document.images) ? document.images['MapWest'] : (document.all) ? document.all['MapWest'] : null;
	if(Map) Map.src = image;
	}
	
</SCRIPT>
Try to correct that one into this:
<SCRIPT type="text/javascript">

function swapImage(image) {
var Map = document.getElementById('MapWest') ||document.images['MapWest']|| MapWest||null;
if(Map) Map.src = image;


alert(Map) //tell us what is the value of this alert please.

}

</SCRIPT>
...because "Language" attribute for the script tag has been deprecated, and using them both (language and type) may cause problems. In case it worked - it might force the browser to use JavaScript v.1.0 mode engine (although I'm sure JS1.0 should be able to interpret your code) but depending on a browser may happen to drop it completely.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 5
Reputation: vairvixen is an unknown quantity at this point 
Solved Threads: 0
vairvixen vairvixen is offline Offline
Newbie Poster

Re: Rollovers not working in FF/Chrome, but IE is okay.

 
0
  #3
Aug 30th, 2009
Thank you. I'll give it a try tomorrow and see if it works any better!
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 40
Reputation: beeerlover is an unknown quantity at this point 
Solved Threads: 6
beeerlover's Avatar
beeerlover beeerlover is offline Offline
Light Poster

Re: Rollovers not working in FF/Chrome, but IE is okay.

 
0
  #4
Aug 30th, 2009
Biggest mistake I see in your code is the A Href tag nestled inside the Area tag instead of combined into 1 tag.

I used your code, and made images for the files it called to. I had to find a State Map image to use, but here is a cross-browser, working, and Validating on w3c Demo: http://www.beeerlover.org/imap.html

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <title>Title</title><script language="javascript" type="text/javascript"><!--
  3. function swapImage(image) {
  4. 	var Map = (document.getElementById) ? document.getElementById('MapWest') : (document.images) ? document.images['MapWest'] : (document.all) ? document.all['MapWest'] : null;
  5. 	if(Map) Map.src = image;
  6. 	}
  7. function MM_swapImgRestore() { //v3.0
  8.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  9. }
  10. function MM_preloadImages() { //v3.0
  11.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  12.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  13.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  14. }
  15. --></script></head><body onload="MM_preloadImages('images/map/MapWest_OR.png','images/map/MapWest_WA.png')">
  16. <img src="images/map/MapWest_NowServing.png" alt="Hover Each State for More info" title="Hover Each State for More info" name="MapWest" width="700" height="508" border="0" usemap="#MapWest_NowServing" id="MapWest" />
  17. <map name="MapWest_NowServing" id="MapWest_NowServing">
  18. <area shape="poly" coords="60,83,72,86,70,97,133,106,142,53,88,39,85,57,63,44" title="Washington" href="javascript:void(0)" onmouseover="swapImage('images/map/MapWest_WA.png')" onmouseout="swapImage('images/map/MapWest_NowServing.png');MM_swapImgRestore()" alt="Washington"  />
  19. <area shape="poly" coords="34,153,117,175,125,138,123,135,136,115,132,107,71,97,71,89,59,86,37,131" title="Oregon" href="javascript:void(0)" onmouseover="swapImage('images/map/MapWest_OR.png')" onmouseout="swapImage('images/map/MapWest_NowServing.png');MM_swapImgRestore()" alt="Oregon" />
  20. </map></body></html>


I luv image maps, wish adobe hadn't killed off Image Ready.
www.beeerlover.org <- my hobby with 15K+ Pink Floyd Images
www.bestbridalprices.com <- my job with 15K+ Wedding Dresses
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 5
Reputation: vairvixen is an unknown quantity at this point 
Solved Threads: 0
vairvixen vairvixen is offline Offline
Newbie Poster

Re: Rollovers not working in FF/Chrome, but IE is okay.

 
0
  #5
Aug 30th, 2009
Thank you both... works like a charm!

•
•
•
•
Originally Posted by beeerlover View Post
I luv image maps, wish adobe hadn't killed off Image Ready.
I agree with your opinion on ImageReady... it used to be my lifeline for this sort of thing... now I have to actually learn code like the real programmers do!
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 ajaxcode ajaxhelp animate array automatically beta box bug calendar cart checkbox child class codes column cookies createrange() css cursor date debugger decimal design dom download dropdown editor element enter error explorer file firefox focus forms frameworks getselection google gwt html htmlform ie8 iframe images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent php player post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search select session shopping size sql text textarea toggle variables w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC