jquery image map hover effect stuttering in and out

Question

I'm putting together a map of the US which has hover states that I need to trigger somehow. The way I've built it (and have done this before on a smaller scale with no problem) is to imagemap the main image of the USA, give each area an id, then use jQuery to show/hide an absolutely positioned div overtop of the map. Each div contains an image with its own map, which when moused over just sends a show() command so that it stays put.

I also have some jquery that hides all divs on mouseleave. Problem is, the hover effects keep turning on and off in this crazy stuttering effect. What am I doing wrong? As you can see I've experimented with various functions, including mouseover, mouseenter, and hover.

<div id="mapContainer">
    <img name="CAS_hotspot_exporter_v2" border="0" src="CAS_hotspot_exporter_v2.jpg" id="CAS_hotspot_exporter_v2" usemap="#m_CAS_hotspot_exporter_v2" alt="" />
    <map name="m_CAS_hotspot_exporter_v2" id="m_CAS_hotspot_exporter_v">
        <area shape="poly" coords="76,138,110,147,101,182,138,248,133,258,132,265,105,260,101,248,97,241,87,235,81,233,70,174" alt="california" id="californiaHotspot"/>
        <area shape="poly" coords="76,137,94,91,100,98,105,102,127,104,149,112,139,124,140,129,133,153" alt="oregon"id="oregonHotspot" />
        <area shape="poly" coords="94,89,96,64,109,70,101,78,106,81,112,75,111,60,153,70,145,109,105,100" alt="washington" id="washingtonHotspot" />
        <area shape="poly" coords="112,149,103,182,136,243,158,161,112,149" href="#" id="nevadaHotspot"/>
        <area shape="poly" coords="133,153,181,162,186,132,172,131,161,113,165,101,157,86,159,73,154,72,146,110,152,112,141,125" href="#" id="idahoHotspot" />
    </map>

    <div id="washington">
        <img src="state_pngs/washington.png" border="0" usemap="#washingtonMap">
        <map name="washingtonMap" id="washingtonMap">
            <area id="washingtonActiveArea" shape="poly" coords="105,83,105,82,106,82,106,83,110,81,112,71,112,71,111,72,112,72,111,72,111,71,111,70,112,70,112,71,112,71,113,70,111,68,111,68,111,68,111,68,111,67,112,67,112,68,112,68,113,65,113,64,113,64,112,62,112,61,112,62,112,61,154,72,147,108,121,104,120,105,119,105,119,104,118,104,118,104,113,103,113,103,112,103,112,102,105,102,104,102,101,101,101,94,99,93,98,93,98,91,97,91,97,91,96,91,96,90,94,90,94,85,95,85,94,88,94,89,95,86,95,86,95,86,96,85,96,86,97,86,96,85,94,84,95,82,97,82,96,82,96,81,95,80,95,81,95,81,95,82,96,64,100,67,100,67,106,70,107,70,109,71,109,71,109,71,109,71,109,71,109,72,110,74,108,75,108,75,108,74,106,77,106,77,104,79,106,79,106,79,105,79,104,79,108,76,108,76,110,74,110,74,110,76,109,77,109,78,108,77,108,77,108,78,109,78,108,81,108,81,107,81,108,80,108,80,106,81,107,81,106,82,106,82,106,82,106,81,106,81,107,80,106,80,103,82,104,82,105,83" />
        </map>
    </div>

    <div id="oregon">
        <img src="state_pngs/oregon.png" border="0" usemap="#oregonMap">
        <map name="oregonMap" id="oregonMap">
            <area id="oregonArea" shape="poly" coords="75,139,76,127,76,127,80,122,81,123,81,122,79,122,90,99,91,99,93,91,95,92,96,91,96,92,98,93,98,93,100,94,100,101,111,102,111,103,112,103,112,103,117,104,117,104,118,104,118,105,146,108,146,110,147,110,148,113,139,128,140,128,141,130,134,155,134,155,75,139" />
        </map>
    </div>

    <div id="idaho">
        <img src="state_pngs/idaho.png" border="0" usemap="#idahoMap">
        <map name="idahoMap" id="idahoMap">
            <area id="idahoArea" shape="poly" coords="184,164,135,154,142,129,141,127,140,127,149,111,148,109,147,109,154,71,161,73,160,90,168,103,168,103,168,103,166,113,164,114,164,116,166,118,169,116,169,116,171,124,171,125,172,127,173,127,173,127,173,128,174,132,175,133,181,132,181,132,183,132,183,133,183,133,186,133,187,131,189,134,189,134,184,164" />
        </map>
    </div>

    <div id="california">
        <img src="state_pngs/california.png" border="0" usemap="#californiaMap">
        <map name="californiaMap" id="californiaMap">
            <area id="californiaActiveArea" shape="poly" coords="24,7,58,16,49,51,90,120,84,138,57,136,30,103,17,42,17,23" />
        </map>
    </div>

    <div id="nevada">
        <img src="state_pngs/nevada.png" border="0" usemap="nevadaMap">
        <map name="nevadaMap" id="nevadaMap">
            <area id="nevadaArea" shape="poly" coords="148,219,144,230,144,230,143,229,140,228,138,240,138,240,137,242,101,183,110,148,160,159,148,219" />
        </map>
    </div>
</div>

And my jQuery:

$(function() { // Equivalent to $(document).ready(function() 
  if (!$.browser.msie && !$.browser.version.substr(0,1)<7) {
   $("area").mouseleave(function(){
    $("#mapContainer div").animate({opacity: 1.0}, 100).fadeOut();
   });
  }

  $("#californiaHotspot, #californiaActiveArea").mouseover(function(){
   $("#california").show();
  });

  $("#idahoHotspot, #idahoActiveArea").mouseenter(function(){
   $("#idaho").fadeIn();
  });

  $("#nevadaHotspot, #nevadaActiveArea").mouseenter(function(){
   $("#nevada").fadeIn();
  });
  $("#nevadaActiveArea").mouseleave(function(){
   $("#nevada").hide();
  });

  $("#oregonHotspot, #oregonActiveArea").mouseover(function(){
   $("#oregon").fadeIn();
  });

  $("#washingtonHotspot, #washingtonActiveArea").mouseover(function(){
   $("#washington").fadeIn();
  });
});

Here it is in "action": http://www.beindivisual.com/projects/fx/map/CAS_hotspot_exporter_FINAL_v2.html

The states I have hooked up are the west coast states.

Answer 1

I would suggest using the jquery .hover() method instead of the .mouseover(), .mouseenter(), .mouseleave() methods to control the showing/hiding of the images. You can control the fadein() and fadeout() methods much more reliably.

http://api.jquery.com/hover/

Answer 2

Agreed jQuery hover is a good idea.

Also I'd consider the following:

• Make the base map (CAS_hotspot_exporter_v2.jpg) a background image of div#mapContainer.
• Use a transparent 1px image for the image map.
• Set width and height to the same as the base map image.
• Give the divs that fade in (e.g. #california) a z-index of -1.

Doing all that means there's a transparent surface always on top for the mouse to "hover" over and the other divs are brought in "underneath" that surface. That way the browser shouldn't trigger a mouseleave event when the new div fades in.

Answer 3

Great idea with a transparent layer on top.

Would it not be the easyest way to make the state images same size as the country image with the state images being transparent except for the state itself.

Just for the reuse of chords and of course depending on the nature of the project - how heavy the images become.