Selecting areas of an image map using jquery

Question

I am trying to select areas of an image map using jquery hover (),

I highlight divs that are absolutely located above the areas, I try to display the div on a hover, but the problem is that the mouse is hovering over a certain area, the selection happens, but quickly disappears, although the mouse is still a hovering 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

div .highlight overlaps your areas when they .highlight around the area, the highlight is displayed, but it disappears because area loses its hover.

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

Here is an 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 have not tried it myself, but here is a demonstration of hilighting images .