Question

我正在为生物学项目制作这个植物标签网页（这里：http://nspowers.org/flower/flower-parts.html）。使用ImageMapster和许多教程，我可以在悬停时突出显示图像映射，但是当选择单个工厂部件时，我无法使用自定义颜色突出显示地图。

我在ImageMapster网站上使用onClick引用了一些示例，包括蔬菜托盘（http://jsfiddle.net/sb9j7/）。但是，我无法正确地将其实现到此项目中。当我尝试隔离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事件来使所选区域填充颜色。这就是我现在所拥有的，（在网页中，这是注释掉的，因为它打破了所有悬停突出显示）。

$('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

我在这里找到了@Jamie Treworgy对区域选择的详细回复：imagemapster: rendering "different" styles for different classes of areas。我在http://jsfiddle.net/RyScW/修改了他的模板小提琴并且它有效。

这就是我需要的：

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

以下是工作版本的链接：http://nspowers.org/flower/working-flower-select.html。

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

1 个答案: