Fill and Mouse Hover Color in ImageMapster jQuery Plugin

StackOverflow https://stackoverflow.com/questions/18368341

  •  26-06-2022
  •  | 
  •  

Question

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>
Was it helpful?

Solution

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,
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top