1

imagemapsterでさまざまな領域をさまざまなスタイルでスタイル設定することは可能ですか？たとえば、私が家の計画を立てている場合、ユーザーはさまざまな部屋をクリックできます：居間、寝室、浴室、...。選択したリビングルームは赤でレンダリングし、選択したスリーピングルームは青で選択する必要があります...ありがとうKurt

4

1 に答える 1

2

現在、独立した領域のグループに適用されるプロファイルを作成する組み込みの方法はありませんが、少し作業するだけで自分で作成できます。これが実際の例です：

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'
    }, ...
    ]
);

多くの領域があり、多くの繰り返しがある場合、これは明らかに大量のデータになります。他の方法で行う方が効率的で、マークアップがはるかに少なくなります。

于 2012-07-27T12:34:54.757 に答える