1

我正在尝试使用 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 并不能真正与 Image Maps 一起正常工作。我已经检查了 ImageMapster 页面和 Beginners 网站上的一些示例，但悬停在我身上不起作用。

4

1 回答 1

1

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

如果页面上只有一个图像，或者希望在页面上的所有图像上执行相同的脚本，则可以使用：

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

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

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

我在这里分叉并通过执行上述操作使其工作

于 2014-04-21T20:30:02.503 回答