jQuery Imagemapster Состояние множественного клика

Я хочу реализовать раскраску с несколькими состояниями, используя http://www.outsharked.com/imagemapster/.

Другими словами, если щелкнуть область один раз, она будет выделена ЗЕЛЕНЫМ цветом, если щелкнуть дважды, она будет выделена КРАСНЫМ цветом, а третий щелчок сбросит окраску.

Я читал документацию и смотрел демоверсии, но не могу понять, как это сделать. Любая помощь приветствуется.

ImageMapster — это самый надежный, но в то же время легкий jQuery-плагин для сопоставления изображений, с которым я когда-либо сталкивался, поэтому, если кто-то не знает другого плагина с этой функциональностью прямо из коробки, я буду придерживаться этого.


jquery mapping map imagemap imagemapster
person SuperDelic    schedule 03.04.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вот пример использования 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
});
person Jamie Treworgy    schedule 10.04.2013