Javascript 带有弹出窗口的Maphilight jQuery

我试图让maphilight jQuery插件允许我在鼠标悬停时执行一个操作，但我似乎无法让它工作并且仍然允许高亮显示

这是我目前的代码：

var j = jQuery.noConflict();

j(document).ready(function() {
    j('.mapF').maphilight({ stroke: true, fillColor: 'FF0000', fillOpacity: 0.2 });

    j('.areaH').hover(function (e) {
        alert('1');
    }, function() {});
});

<img src="img.jpg" usemap="#map" class="mapF">

<map name="map" class="mapH">
<area shape="poly" coords="161,64,226,7,273,44,211,88,160,65" href="#" mystuff="img1.jpg" class="areaH" />
<area shape="poly" coords="3,269,5,282,11,296,24,315,41,326,49,329,58,329,58,339,0,339,0,272,3,270" href="#" />
<area shape="poly" coords="231,328,368,328,369,345,230,345" href="#" />
<area shape="poly" coords="293,204,297,228,298,251,281,252,280,265,243,264,243,261,231,261,231,226,292,204" href="#" />
<area shape="poly" coords="306,199,370,175,369,231,309,231,305,199" href="#" />
<area shape="poly" coords="362,106,379,158,515,104,498,58,435,88,417,85" href="#" />
<area shape="poly" coords="48,163,73,194,17,237,18,223,29,197,48,164" href="#" />
</map>

var j=jQuery.noConflict（）；
j（文档）.ready（函数（）{
maphilight（{stroke:true，fillColor:'FF0000'，fillOpacity:0.2}）；
j（'.areaH'）。悬停（函数（e）{
警报（“1”）；
}，函数（）{}）；
});

好的，鼠标悬停正在工作，但它会从Hilight插件中取消控制，并且该区域不再高亮显示

我想实际运行一个完整的函数，并显示一个弹出窗口，但保持对象高亮显示

---

有什么想法吗？

好的，我找到了用jQuery Cluetips来实现它的方法。我尝试了一些模式框，比如阴影框和灯箱，但它们只是从地图部分移除了焦点，也不让它高亮显示

因此，最快、最简单的方法是使用Cluetip，并使用需要使用close按钮关闭的持久性框

var j = jQuery.noConflict();

j(document).ready(function() {
    j('.mapF').maphilight({
        stroke: true,
        fillColor: 'FF0000',
        fillOpacity: 0.2
    });

    j('.areaH').cluetip({
        width: '553px',
        showTitle: true,
        sticky: true,
        closePosition: 'title',
        closeText: '<img src="cross.png" alt="" />',
        tracking: false
    });
});

<img src="image.jpg" usemap="#map" class="mapF">
<map name="map" class="mapH">
<area shape="poly" coords="161,64,226,7,273,44,211,88,160,65" href="#" rel="img1.jpg" class="areaH" />
<area shape="poly" coords="3,269,5,282,11,296,24,315,41,326,49,329,58,329,58,339,0,339,0,272,3,270" href="#" rel="img4.jpg" class="areaH" />
<area shape="poly" coords="231,328,368,328,369,345,230,345" href="#" rel="img3.jpg" class="areaH" />
<area shape="poly" coords="293,204,297,228,298,251,281,252,280,265,243,264,243,261,231,261,231,226,292,204" href="#" rel="img10.jpg" class="areaH" />
<area shape="poly" coords="306,199,370,175,369,231,309,231,305,199" href="#" rel="img5.jpg" class="areaH" />
<area shape="poly" coords="362,106,379,158,515,104,498,58,435,88,417,85" href="#" rel="img8.jpg" class="areaH" />
<area shape="poly" coords="48,163,73,194,17,237,18,223,29,197,48,164" href="#" rel="img2.jpg" class="areaH" />
</map>

var j=jQuery.noConflict（）；
j（文档）.ready（函数（）{
j（'.mapF'）.maphilight({
中风：是的，
fillColor:'FF0000'，
填充不透明度：0.2
});
j（'.areaH'）.cluetip({
宽度：“553px”，
节目名称：真的，
斯蒂奇：是的，
关闭位置：'标题'，
closeText:“”，
跟踪：错误
});
});

这个设置非常有效，允许我拥有我想要的小弹出窗口，用户必须关闭每个弹出窗口。或者，如果他们在启动时转到另一个，则新的将在不需要关闭的情况下替换上一个。总之，这是一个很好的解决方案。另外，如果我需要拉入外部页面，cluetip支持Ajax调用