Image maps, jQuery, and IE (all versions) won't play nice!

Image maps, jQuery, and IE (all versions) won't play nice!

I have this navigation menu, and due to the diagonal orientation of the buttons, I'm using an image map.

I have a transparent image using my image map on top, 5 hidden divs in the middle, and the "off" state for all 5 buttons on the bottom.

All the area tags inside the map have IDs assigned, and in Firefox, Safari, Chrome, and Opera, using a plain old $('#areaID') works just fine.

For whatever reason, IE (all the way up to version 8) won't acknowledge the 'hover' event on any of the area IDs.

I have conducted extensive troubleshooting and I am sure that this is the problem- if I use some other event as a trigger for what I'm trying to do, IE behaves OK. It just refuses to react to hover events on the image map.

Please help!

Here's the jQuery stuff (adapted for WordPress)
<script type="text/javascript">

jQuery(document).ready(function($){
      $("#gallery").hover(
         function(){
           $("#bgallery").show();
         },
         function(){
           $("#bgallery").hide();
         }
      );
      $("#news").hover(
         function(){
           $("#bnews").show();
         },
         function(){
           $("#bnews").hide();
         }
      );
      $("#framesparts").hover(
         function(){
           $("#bframesparts").show();
         },
         function(){
           $("#bframesparts").hide();
         }
      );
      $("#servicefittings").hover(
         function(){
           $("#bservicefittings").show();
         },
         function(){
           $("#bservicefittings").hide();
         }
      );
      $("#contact").hover(
         function(){
           $("#bcontact").show();
         },
         function(){
           $("#bcontact").hide();
         }
      );
});
</script>


Here's the CSS
   #navover {
      z-index:6;
   }
   #navunder {
      background:url(img/nav/wholething.png) no-repeat;
      z-index:4;
   }

   #header #bgallery {background:url(img/nav/gallery0.png) no-repeat; display:none; z-index:5; }

   #header #bframesparts {background:url(img/nav/framesparts0.png) no-repeat; display:none; z-index:5;}

   #header #bnews {background:url(img/nav/news0.png) no-repeat; display:none; z-index:5;}

   #header #bservicefittings {background:url(img/nav/servicefittings0.png) no-repeat; display:none; z-index:5;}

   #header #bcontact {background:url(img/nav/contact0.png) no-repeat; display:none; z-index:5;}


The image map
<map name="Map" id="Map">
   <area id="contact" name="contact" shape="poly" coords="197,128,278,0,246,0,164,128" href="/wordpress/contact" alt="Contact" />
   <area id="servicefittings" shape="poly" coords="157,128,238,0,206,0,124,128" href="/wordpress/service-fittings" alt="Services and Fittings" />
   <area id="framesparts" shape="poly" coords="115,128,196,0,164,0,82,128" href="/wordpress/frames-parts" alt="Frames and Parts" />
   <area id="news" shape="poly" coords="76,128,157,0,125,0,43,128" href="/wordpress/news" alt="News" />
   <area id="gallery" shape="poly" coords="33,128,114,0,82,0,0,128" href="/wordpress/gallery" alt="Gallery" />
</map>


And the XHTML
  <div class="nav" id="navunder">&nbsp;</div>
   
    <div class="nav" id="bgallery">&nbsp;</div>
    <div class="nav" id="bnews">&nbsp;</div>
    <div class="nav" id="bframesparts">&nbsp;</div>
    <div class="nav" id="bservicefittings">&nbsp;</div>
    <div class="nav" id="bcontact">&nbsp;</div>
   
    <div class="nav" id="navover">
        <img src="<?php bloginfo('template_url'); ?>/img/nav/fake.png" width="280" height="258" usemap="#Map">
    </div> 


I should also mention that IE sees the image map just fine- all the links work just like they're supposed to. It just doesn't seem to understand the hover event over the various area IDs.

Does anyone know what's going on here? I reeeeeeally don't want to resort to Flash, but if this won't work in IE it's basically useless for the client in question.

Thanks!