CODEWITHSUNDEEP
jqueryhoverimagemapster
user2512696
user2512696

Reputation: 325

Fill and Mouse Hover Color in ImageMapster jQuery Plugin

I am trying to set the color for click and hovering over an image using the jquery plugin ImageMapster, and can't seem to change them to anything besides black using the fillColor and other options.

Any thoughts?

<!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>

Upvotes: 0

Views: 2193

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

I've only briefly looked at ImageMapseter, but I did notice that the colors have to be defined without the #. So in your example:

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

Upvotes: 1

Related Questions