highlighting image map areas using jquery

Question

I'm trying to highlight image map areas with jquery hover(),

I have highlighting divs which are absolutely positioned over the areas, I'm trying to display the div on hover but the problem is when the mouse is hovering over a particular area the highlighting happens but disappears quickly even-though the mouse is still hovering the area,

any idea what I'm doing wrong,

        <div class="highlight" id="first_area_highlight"></div>
        <div class="highlight" id="second_area_highlight"></div>
        <map name="worksMap" id="worksMap" class="map-areas">
          <area id="first_area" shape="poly" coords="80,64,176,46,186,95"  />
          <area id="second_area" shape="rect" coords="196,107,272,222"  />
                 .....
        </map>

$(function() {


   $('.highlight').hide();    
   var id;
   $('area').hover(function() {
     id = $(this).attr('id');
     highlight(id);
   },function() {
     unHighlight(id);
   });

   function highlight(id) {
     $('#' + id + '_highlight').show('slow');
   }
   function unHighlight(id) {
     $('#' + id + '_highlight').hide('slow');
   }

});

Answer 1

the .highlight divs overlap your areas, when hovering over an area, the highlight is shown, but it disappears, because the area loses hover.

What you can do, is to show .highlight on area.mouseenter and hide .highlight on highlight.mouseleave.

Here's the idea:

$('area')
    .mouseenter(function() {
        var id = $(this).attr('id');
        $('#' + id + '_highlight').show('slow');
    });

$('.highlight')
    .mouseleave(function () {
        $(this).hide('slow');
    })
    .hide();

Answer 2

You can try the Raphaël plugin, I haven't tried it myself, but here's a demo of hilighting image maps.