Jquery 使用onClick事件通过ImageMapster用颜色填充图像贴图中的选定区域

我正在为一个生物学项目制作这个植物标签网页（这里：）。使用ImageMapster和许多教程，我可以使图像贴图在悬停时高亮显示，但无法使贴图在选中单个植物零件时保持自定义颜色高亮显示

我在ImageMapster站点上引用了使用onClick的示例，包括蔬菜托盘（）。然而，我还没有能够正确地将它实施到这个项目中。当我试图隔离onClick命令以了解其工作原理时，它会中断

我在项目的脚本中注释了onClick事件，因为它破坏了所有突出显示。以下是当前脚本：

$(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);

});

});

我想学习如何使用onClick事件使所选区域充满颜色。这就是我现在拥有的（在网页中，这被注释掉了，因为它打破了所有悬停突出显示）

---

我在这里找到了@Jamie Treworgy对区域选择的详细回应：。我修改了他的模板小提琴在和它的工作

这就是我需要的：

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;
    }            
}
});

以下是指向工作版本的链接：

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;
    }            
}
});