Question

我正在尝试使用ImageMapster jQuery为多边形图像映射创建悬停区域，但悬停在区域上方无效。图像映射可以正常工作，但悬停效果不起作用。当你用鼠标悬停它时，我希望每个六边形都能改变颜色。

图片地图代码：

<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映射代码

<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链接为外部资源，并将您的脚本块放在javascript面板中。您也可以省略前两个脚本行，因为这些不是必需的。

我把它分叉here并通过上面的

让它工作

使用ImageMapster将图像映射悬停在区域上jQuery无法正常工作

1 个答案: