0

http://www.outsharked.com/imagemapster/を使用してマルチステート カラーリングを実装したいと思います。

つまり、領域を 1 回クリックすると緑で強調表示され、2 回クリックすると赤で強調表示され、3 回目のクリックで無色にリセットされます。

ドキュメントを読み、デモを見てきましたが、これを達成する方法がわかりません。どんな助けでも大歓迎です。

ImageMapster は、私が出会った中で最も堅牢でありながら軽量なイメージ マッピング jQuery プラグインです。

4

1 に答える 1

3

ImageMapster を使用して 3 つの状態を追跡する例を次に示します。

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
});
于 2013-04-10T14:17:36.090 に答える