Member Avatar for vairvixen

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!

  • 3 Contributors
  • 4 Replies
  • 180 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by vairvixen
Member Avatar for Troy III 
<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||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.

Member Avatar for vairvixen

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

Member Avatar for beeerlover

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.

Member Avatar for vairvixen

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:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.