ImageMapster：さまざまなクラスの分野のための「さまざまな」スタイルをレンダリングする

Question

イメージマップスターのさまざまなスタイルで異なる領域をスタイルすることは可能ですか？Examplの場合：私が家の計画を立てるとき、ユーザーは別の部屋をクリックすることができます：リビングルーム、寝室、バスルーム、...。選択したリビングルームは赤でレンダリングする必要があります。選択した寝室は青を選択する必要があります。 感謝します カート

Answer 1

独立した地域のグループに適用されるプロファイルを作成するための内蔵の方法はありませんが、少しの仕事で自分でできることがあります。これが実用的な例です：

http://jsfiddle.net/jamietre/ryscw/

最初に相互参照を設定します：

var profiles = [
{ 
    areas: "ME,VT,CT,NH,RI,DE,MA",
    options: {
        fillColor: '0000ff'   
    }
},
{
    areas: "UT,CO,AZ,NM",
    options: {
        fillColor: '00ff00'   
    }
}
];

.

次に、各領域の「MapKey」を使用して、プロファイルを新しいオブジェクトにマッピングします。

var optionsXref = {};

$.each(profiles,function(i,e) {
    var areas = e.areas.split(',');

    $.each(areas,function(j,key) {
        optionsXref[key]=e.options;
    });        
});

.

これは、このようなオブジェクトに作成した単純な構造体をこのようなオブジェクトに変換します。

{ "ME": { reference to first option group },
  "VT": { reference to first option group },
  ... 
  "UT": { reference to 2nd option group },
  ..
}

.

最後に「クリック」を「クリック」を傍受し、特定のオプションを使用して手動で領域を選択します。

image.mapster({
    mapKey: 'data-state',
    onClick: function(e) {
        if (e.selected) {

            // the 4th parameter is the options that area mapped to that area.

            image.mapster('set',true,e.key, optionsXref[e.key]);       
            return false;
        }            
    }
});

.

return falseを使用すると、ImageMapsterは独自のクリック処理をキャンセルさせます。それはそれです。

完全性のために - これを昔ながらの方法で行い、各エリアにオプションを割り当てることができます：

これを行う直接的な方法は、各エリアへの特定の情報を前面に追加することです。

$('img').mapster({
    areas: [{ 
        mapKey: 'living-room-1',
        fillColor: 'ff0000'
    },
    {
        mapKey: 'living-room-2',
        fillColor: 'ff0000'
    }, ...
    ]
);

.

これは明らかに多くの地域を持っていたならば、多くの繰り返しを持っていたならば、たくさんのデータになるでしょう。それはより効率的で、それを他の方法でそれをするためのマークアップはたくさんありません。