ImageMapster jQuery插件中的填充和鼠标悬停颜色

时间:2013-08-21 21:52:47

标签: jquery hover imagemapster

我正在尝试使用jquery插件ImageMapster设置单击和悬停在图像上的颜色,并且似乎无法使用fillColor和其他选项将它们更改为除黑色之外的任何内容。

有什么想法吗?

<!DOCTYPE html>
<html>
<body>
    <img src="/Users/Gavin/Downloads/Chrome/econwillow/Centipede02/centipeder.jpg" id="centipede" usemap="#image_map">

    <map name="image_map" id="image_map">
        <area shape="poly" color ="blue" coords=" 55,104, 62,106, 61,178, 77,183, 57,214, 36,181, 51,178, 53,105" href="#" alt="red hotspot"/>
        <area shape="poly" color="red" coords=" 82,84, 126,85, 128,96, 165,77, 130,60, 130,72, 84,77, 83,80" href="#" alt="purple hotspot"/>
     </map>

<script>
    $('#centipede').mapster({
        singleSelect: true,
        mapKey: 'color',
    fill: true,
    fillColor: "#FF0000",
    fillOpacity: 1,
});

</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我只是简单地看过ImageMapseter,但我注意到必须在没有#的情况下定义颜色。所以在你的例子中:

$('#centipede').mapster({
    singleSelect: true,
    mapKey: 'color',
    fill: true,
    fillColor: "FF0000",
    fillOpacity: 1,
});