Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1970

Aug 29th, 2009

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

Expand Post »

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)
 
<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>
<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>

And in the body...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
 
<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>
<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<b></b>: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.

Similar Threads

IE/Firefox/Chrome not loading web pages in Viruses, Spyware and other Nasties
Download Google's new web browser CHROME! in Web Browsers
Trackpad leaves working almost........? in Troubleshooting Dead Machines
AJAX CalendarExtender is not working with chrome in ASP.NET
Daniweb with Google Chrome in DaniWeb Community Feedback

vairvixen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Aug 2009

Permalink

Aug 29th, 2009

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

Click to Expand / Collapse Quote originally posted by vairvixen ...

(Toggle Plain Text)
<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>
<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.

Troy III

Reputation Points: 120

Solved Threads: 61

Posting Pro

Offline

511 posts
since Jun 2008

Permalink

Aug 30th, 2009

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

Thank you. I'll give it a try tomorrow and see if it works any better!

vairvixen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Aug 2009

Permalink

Aug 30th, 2009

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

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)
<!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" />
<title>Title</title><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;
	}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
--></script></head><body onload="MM_preloadImages('images/map/MapWest_OR.png','images/map/MapWest_WA.png')">
<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" />
<map name="MapWest_NowServing" id="MapWest_NowServing">
<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"  />
<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" />
</map></body></html>
<!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" />
<title>Title</title><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;
	}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
--></script></head><body onload="MM_preloadImages('images/map/MapWest_OR.png','images/map/MapWest_WA.png')">
<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" />
<map name="MapWest_NowServing" id="MapWest_NowServing">
<area shape="poly" coords="60,83,72,86,70,97,133,106,142,53,88,39,85,57,63,44" title="Washington" href="javascript<b></b>:void(0)" onmouseover="swapImage('images/map/MapWest_WA.png')" onmouseout="swapImage('images/map/MapWest_NowServing.png');MM_swapImgRestore()" alt="Washington"  />
<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<b></b>:void(0)" onmouseover="swapImage('images/map/MapWest_OR.png')" onmouseout="swapImage('images/map/MapWest_NowServing.png');MM_swapImgRestore()" alt="Oregon" />
</map></body></html>

I luv image maps, wish adobe hadn't killed off Image Ready.

beeerlover

Reputation Points: 10

Solved Threads: 6

Light Poster

Offline

40 posts
since May 2009

Permalink

Aug 30th, 2009

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

Thank you both... works like a charm!

Click to Expand / Collapse Quote originally posted by beeerlover ...

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!

vairvixen

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

7 posts
since Aug 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.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Maximize and Minimize Events in Browsers

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: calculating form problem

DaniWeb Message

Cancel Changes

User Name
Password