[SOLVED] Changing the fill color of a selected area using ImageMapster

Changing the fill color of a selected area using ImageMapster

I am currently using image mapster. Here I initialize the image mapster to only show on hover.

$('img').mapster( { 
        mapKey: 'data-key',
        staticState: false,
        fillOpacity: 0.0,
        strokeColor: "3320FF",
        strokeOpacity: 0.8,
        strokeWidth: 4,
        stroke: true,
        });

Here I am setting the fill color of the area I want to fill to red. This works.

$(window).load(function() {
        $('img').mapster('set',true,'areaIWantToFill', {stroke: false, fillOpacity : 0.5, fillColor: "d42e16"} );
    });

Now here is where I am having trouble. On a certain event I want to recolor the area like this:

function changecolor(){
            alert("change color");
            $('img').mapster('set',true,'areaIWantToFill', {fillColor: "ffffff"} );
        }

The alert "change color" shows but the area does not change color. Any idea as to where I went wrong?

Solution

I managed to fix this by removing staticState (thereby using the default value of null). I also set isSelectable to false.

The original documentation is not online anymore but google has a cached version http://webcache.googleusercontent.com/search?q=cache:fsQHicPD1rsJ:www.outsharked.com/test/imagemapster/docs.html+&cd=1&hl=en&ct=clnk&gl=is