jQuery Imagemapster多擊狀態

Question

我想使用http://www.outsharked.com/imagemapster/來實現多狀態着色。

換句話說，當一個區域被點擊一次，它會以綠色突出顯示，如果點擊兩次，它將以紅色突出顯示，並且第三次點擊將重置爲不着色。

我一直在閱讀文檔和看演示，但不能說明如何做到這一點。任何幫助表示讚賞。

ImageMapster是我遇到過的最健壯，但是很輕量級的Image Mapping 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 
});