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

Question

vairvixen 0 Newbie Poster

17 Years Ago

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!

html-css javascript

3 Contributors
4 Replies
193 Views
1 Day Discussion Span
Latest Post 17 Years Ago Latest Post by vairvixen

Dani AI

Generated 6 Months Ago

Short expert note: this was a classic case of IE silently "fixing" invalid markup while Firefox and Chrome did not. correctly called out the malformed nesting (an anchor wrapped around an area) and 's point about avoiding deprecated script attributes is sound. Standards-compliant browsers enforce the map/area model, so inline handlers attached to invalid DOM locations simply never run.

Practical checklist (fast wins):

Validate the markup (W3C validator) and make sure the <img usemap> value exactly matches the <map name> (use the leading "#" in the usemap value).
Give the main image a proper id and access it via getElementById rather than relying on name/document.images.
Ensure each <area> is a real element (not wrapped in another tag) and has title/alt for accessibility. Some browsers require a valid href on areas for hover/focus behavior.
Use the browser devtools: check the console for JS errors and the Network tab for 404s on the rollover images.
Watch CSS: overlay elements or pointer-events settings can stop hover events from reaching the map.

A more robust, modern pattern (avoid many inline handlers): store the target image in a data attribute on each area and use a single event listener to handle swap/restore. Example:

<!-- put data-image/data-reset on each area -->
<area shape="poly" coords="..." data-image="images/map/MapWest_WA.png" data-reset="images/map/MapWest_NowServing.png" href="#" alt="Washington" title="Washington">

document.addEventListener('mouseover', function(e){
  var a = e.target;
  if (a && a.tagName === 'AREA' && a.dataset.image){
    document.getElementById('MapWest').src = a.dataset.image;
  }
});
document.addEventListener('mouseout', function(e){
  var a = e.target;
  if (a && a.tagName === 'AREA' && a.dataset.reset){
    document.getElementById('MapWest').src = a.dataset.reset;
  }
});

Extra tips: preload critical rollover images with <link rel="preload" as="image"> or a small JS preloader to avoid flicker, and consider SVG or CSS overlays where precise interactivity and accessibility are required. The fix that worked in this thread was primarily correcting the markup and using standard DOM access.

All 4 Replies

Troy III 272 Posting Pro

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

Reply to this topic

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.

vairvixen 0 Newbie Poster · Answer 1 · 2009-08-30T09:03:42+00:00

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

beeerlover 0 Light Poster · Answer 2 · 2009-08-30T10:02:13+00:00

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:

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

vairvixen 0 Newbie Poster · Answer 3 · 2009-08-31T06:38:18+00:00

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:

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

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers