0

我正在为一个生物项目制作这个植物标签网页（这里： 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 aa single plant part is selected.

我在 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
},
});
4

1 回答 1

2

我在这里找到了@Jamie Treworgy 对区域选择的详细回复：imagemapster: rendering "different" styles for different classes of area。我在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。

于 2014-05-15T02:45:07.027 回答