Using the onClick event to fill a selected region in an image map with color via ImageMapster

Question

I am making this plant label webpage for a biology project (here: http://nspowers.org/flower/flower-parts.html). Using ImageMapster and many tutorials, I can get the image map to highlight on hover, but I cannot get the map to stay highlighted with a custom color when a a single plant part is selected.

I referenced examples using onClick on the ImageMapster site, including the vegetable tray (http://jsfiddle.net/sb9j7/). However, I have not been able to correctly implement it to this project. When I try to isolate the onClick command to learn how it works, it breaks.

I commented the onClick event out of the script in the project because it breaks all of the highlighting. The following is the current script:

$(window).load(function(){

$('img').mapster({
    fillColor: 'efe41b',
    fillOpacity: 0.3,
    stroke: true,
    strokeWidth: 1,
    staticState: true,   /*Enables highlighted areas on load*/
    singleSelect: true,
    mapKey: 'data-key',
    listKey: 'data-key', /*Runs single selection)*/

    render_highlight: {
        strokeWidth: 5,
        fillColor: 'efe41b',
        fillOpacity: 1,
        mapkey: 'data-key',
    },

});

$("#stamens").click(function() {
$("#annotation01").toggle();
    $("#annotation01").fadeIn(1500);
    $("#annotation02").hide(0);
    $(".annotation-placeholder").hide(0);


});


$(".petals").click(function() {
$("#annotation02").toggle();
    $("#annotation02").fadeIn(1500);
    $("#annotation01").hide(0);
    $(".annotation-placeholder").hide(0);

});

});

I would like to learn how to use an onClick event to cause the selected area to be filled with color. This is what I have now, (in the webpage, this is commented out because it breaks all of the hover highlighting).

$('img').mapster ({

onClick: function (e) {
        image.mapster('set_options', { 
            }),            
},

var='set_options' {
        mapKey: 'data-key',
        listKey: 'data-key',
        fillColor: 'efe41b',
        stroke: true,
        strokeWidth: 5
},
});

Answer 1

I found @Jamie Treworgy's detailed response to area selection here: imagemapster: rendering "different" styles for different classes of areas. I modified his template fiddle at http://jsfiddle.net/RyScW/ and it works.

This is what I needed:

var profiles = [
{ 
    areas: "_stamen,_petals",
    options: {
        fillColor: 'efe41b'   
    }
},

];


var optionsXref = {};

$.each(profiles,function(i,e) {
var areas = e.areas.split(',');


$.each(areas,function(j,key) {
    optionsXref[key]=e.options;
});        
});


var image = $('#map');

image.mapster({
mapKey: 'data-state',
onClick: function(e) {
    if (e.selected) {
        image.mapster('set',true,e.key, optionsXref[e.key]);       
        return false;
    }            
}
});

Here is a link to the working version: http://nspowers.org/flower/working-flower-select.html.