带有弹出窗口的 Maphilight jQuery

Posted 2023-05-09

【中文标题】带有弹出窗口的 Maphilight jQuery

【英文标题】：Maphilight jQuery with popup

【发布时间】：2012-11-24 22:21:31

【问题描述】：

我正在尝试让 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 插件中夺走控制权，并且该区域不再突出显示。

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

有什么想法吗？

【参考方案1】：

好的，我想出了如何使用 jQuery Cluetips 来代替。我尝试了几个模态框，例如 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"  />',
        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>

此设置完美运行，允许我拥有我想要的小弹出窗口，而用户必须关闭每个弹出窗口。或者，如果他们在启动时转到另一个，则新的将替换前一个，而无需关闭。所以总而言之，这是一个很好的解决方案。如果我需要拉入外部页面，加上线索提示支持 Ajax 调用。