jquery - jQuery Imagemapster 多次点击状态

Question

我想使用http://www.outsharked.com/imagemapster/实现多状态着色。

换句话说，当一个区域被点击一次时，它会以绿色突出显示，如果点击两次，它将以红色突出显示，第三次点击将重置为无颜色。

我一直在阅读文档并查看演示，但无法弄清楚如何实现这一点。任何帮助表示赞赏。

ImageMapster 是我遇到过的最强大且最轻量级的图像映射 jQuery 插件，因此除非有人知道另一个开箱即用的具有此功能的插件，否则我会坚持使用这个。

Answer 1

下面是使用 ImageMapster 跟踪三种状态的示例：

http://jsfiddle.net/jamietre/GjxCk/

基本技巧是您必须自己跟踪每个区域的状态，并告诉 ImageMapster 要做什么。这是代码：

var map = $('#map'),
    // a object map for tracking the state of each area
    selStates = {},

    // rendering options for the 1st selected state
    selected1opts = {
        fillColor: '00ff00',
        stroke: true,
        strokeColor: '000000',
        strokeWidth: 2
    },

    // rendering options for the 2nd selected state
    selected2opts = {
        fillColor: 'ff0000',
        stroke: true,
        strokeColor: '00ff00',
        strokeWidth: 1
    };

// make an array from the different states' rendering options so we can easily
// choose one

var renderOpts = [selected1opts, selected2opts];

function onClick(data) {

    // get current state (0,1,2) -- default to zero which means unset

    var cur = selStates[data.key] || 0,
        next = (cur + 1) % 3;

    // always unset: if state 0, this is all we need to do. if state
    // 2, we have to unset first, since setting the state for an area
    // that's already selected will do nothing. If it happens to be going from 
    // 0 to 1, then no harm done.

    map.mapster('set', false, data.key);

    if (next) {        
        // now set the area state using the correct options
        map.mapster('set', true, data.key, renderOpts[cur]);
    }

    // update local store with current state
    // add 1, and apply a modulus of 3 to get new state

    selStates[data.key] = next;

}

map.mapster({
    mapKey: 'state',

    // setting isSelectable=false will prevent imagemapster from using its own click-select
    // handling. You could also return false from the onClick event to stop internal handling

    isSelectable: false,

    // bind our "onClick" function above to handle area clicks

    onClick: onClick
});