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

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

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

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

vairvixen

Newbie Poster

7 posts since Aug 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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

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

Practically a Master Poster

609 posts since Jun 2008

Reputation Points: 120

Solved Threads: 80

2 Years Ago

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

vairvixen

Newbie Poster

7 posts since Aug 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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

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

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

beeerlover

Light Poster

40 posts since May 2009

Reputation Points: 10

Solved Threads: 6

2 Years Ago

Thank you both... works like a charm!

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! :sweat:

vairvixen

Newbie Poster

7 posts since Aug 2009

Reputation Points: 10

Solved Threads: 0

This question has already been solved

You