Question

我正在尝试使用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>

好的，悬停正在运行，但它可以控制远离Hilight插件，并且该区域不再突出显示。

我怎样才能让它工作，我想实际运行一个整个函数并弹出一个窗口，但保持对象突出显示。

有什么想法吗？

Answer 1

好的，我想出了如何用jQuery Cluetips代替它。我尝试了几个Modal盒子，比如Shadowbox和Lightbox，但他们只是从地图部分移除焦点，不会让它突出显示。

所以最快最简单的方法是使用Cluetip并使用需要使用关闭按钮关闭的持久框。

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>

此设置完美运行，并允许我拥有我想要的小弹出窗口，用户必须关闭每个弹出窗口。或者，如果它们在另一个上升到另一个时，新的将取代之前的一个而不需要关闭。总而言之，这是一个很好的解决方案。如果我需要拉入外页，那么cluetip支持Ajax调用。

Maphilight jQuery与弹出窗口

1 个答案: