javascript - 图像 map 悬停在区域上，ImageMapster jQuery 不起作用

Question

我正在尝试使用 ImageMapster jQuery 创建多边形图像 map 的悬停区域，但悬停区域不起作用。图像贴图可以正常工作，但悬停效果不起作用。我希望当您将鼠标悬停在每个六边形上时，它会改变颜色。

图像映射代码:

<img id="Image-Maps-Com-image-maps-2014-03-26-105007" src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testbg.jpg" border="0" width="594" height="299" orgWidth="594" orgHeight="299" usemap="#image-maps-2014-03-26-105007" alt="" />
<map name="image-maps-2014-03-26-105007" id="ImageMapsCom-image-maps-2014-03-26-105007">
<area shape="rect" coords="592,297,594,299" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_12288" />
<area id="Area One" alt="Area One" title="Area One" href="/areaone/" shape="poly" coords="58,3,167,1,223,96,169,188,59,190,5,95" style="outline:none;" target="_self"     />
<area id="Area Two" alt="Area Two" title="Area Two" href="/areatwo/" shape="poly" coords="230,99,339,99,394,193,340,287,230,288,175,193" style="outline:none;" target="_self"     />
<area id="Area Three" alt="Area Three" title="Area Three" href="/areathree/" shape="poly" coords="403,2,509,2,567,96,511,189,403,190,350,96" style="outline:none;" target="_self"     />
</map>

使用 ImageMapster jQuery 绘制 map 代码

<script type="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.imagemapster.js"></script>

<img id="Image-Maps-Com-image-maps-2014-03-26-105007" src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testbg.jpg" border="0" width="594" height="299" orgWidth="594" orgHeight="299" usemap="#image-maps-2014-03-26-105007" alt="" />
<img src="http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testcolour.jpg" style="display:none" />
<map name="image-maps-2014-03-26-105007" id="ImageMapsCom-image-maps-2014-03-26-105007">
<area shape="rect" coords="592,297,594,299" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_12288" />
<area id="Area One" alt="Area One" title="Area One" href="/areaone/" shape="poly" coords="58,3,167,1,223,96,169,188,59,190,5,95" style="outline:none;" target="_self"     />
<area id="Area Two" alt="Area Two" title="Area Two" href="/areatwo/" shape="poly" coords="230,99,339,99,394,193,340,287,230,288,175,193" style="outline:none;" target="_self"     />
<area id="Area Three" alt="Area Three" title="Area Three" href="/areathree/" shape="poly" coords="403,2,509,2,567,96,511,189,403,190,350,96" style="outline:none;" target="_self"     />
</map>

<script>
$(document).ready(function ()
{
    $('#sanitisationmap').mapster({
    singleSelect : true,
    clickNavigate : true,
    fill : true, altImage : 'http://www.image-maps.com/m/private/0/vhiamh2cuht9c2tmik9galgrf7_testcolour.jpg',
    fillOpacity : 1,
});
});
</script>

我确信我错过了一些简单的事情。这是jfiddle .

我也尝试过使用 CSS 来解决这个问题，但我在这里读到 CSS 并不能真正与图像映射一起正常工作。我已经检查了 ImageMapster 页面和初学者网站上的一些示例，但将鼠标悬停在上面对我不起作用。

Answer 1

您调用mapster 的图像名称与实际图像的名称之间似乎存在一些脱节。

如果页面上只有一张图像或希望在页面上的所有图像上执行相同的脚本，您可以使用:

$('img').mapster({ ... 

否则，请确保您在脚本中使用与 HTML 相同的图像名称

就您的 jfiddle 而言，将 jquery.imagemapster.js 链接为外部资源并将脚本 block 放置在 javascript 面板中。您还可以省略前 2 行脚本，因为这些不是必需的。

我 fork 了它 here并通过执行上述操作使其正常工作