highlighting image map areas using jquery
<p>I'm trying to highlight image map areas with jquery hover(),</p>

<p>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, </p>

<p>any idea what I'm doing wrong,</p>

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

$(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');
   }

});
</code></pre>
