使用 jquery 突出显示图像地图区域答案

【问题标题】：highlighting image map areas using jquery使用 jquery 突出显示图像地图区域
【发布时间】：2011-01-19 15:22:39
【问题描述】：

我正在尝试使用 jquery hover() 突出显示图像地图区域，

我突出显示绝对位于区域上方的 div，我试图在悬停时显示 div，但问题是当鼠标悬停在特定区域上时，突出显示发生但很快消失，即使鼠标是仍在该区域徘徊，

知道我做错了什么，

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

});

【问题讨论】：

标签： jquery

【解决方案1】：

.highlight div 与您的 areas 重叠，当悬停在某个区域上时，高亮显示，但它消失了，因为 area 失去悬停。

您可以做的是在 area.mouseenter 上显示 .highlight 并在 highlight.mouseleave 上隐藏 .highlight。

这是一个想法：

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

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

【讨论】：

【解决方案2】：

你可以试试Raphaël这个插件，我自己没试过，这里有一个demo of hilighting image maps。

【讨论】：