これは難しいことではありませんが、注意すべき点がいくつかあります。実際の例は次のとおりです。
http://jsfiddle.net/gCTcF/
更新:元の例は一方向にしか機能しません。この例は双方向に機能し、最後に議論します。
http://jsfiddle.net/UrNsH/
1) ImageMapster は領域を一意の識別子と見なすため、2 つの画像を同じイメージマップにバインドすることはできません。したがって、単純にコピーを作成し、2 番目のイメージをコピーにバインドします。
var map = $('map[name="map"]'),
clone = map.clone().attr('name', 'map2'),
image2 = $('#map_mini');
map.after(clone);
image2.attr('usemap', '#map2');
stateChange2) 正しい方向に進んでいました。マップを同期するために使用する必要があります。そのイベントから送信されたデータは、他のマップで呼び出す必要があるコードに完全には変換されないため、イベントに応じて適切な呼び出しを行うために少しロジックを使用します。
function state_change(data) {
if (data.state=='highlight')
{
// add or remove a highlight to the alternate image. the syntax to add vs.
// remove a highlight is a little different (you don't need to specify where
// you're removing - there can be only one highlight) so easiest to use two
// different statements for add vs. remove.
if (data.selected) {
image2.mapster('highlight',data.key,true);
} else {
image2.mapster('highlight',false);
}
} else if (data.state=='select') {
// add or remove the "selected" state to the alternate image.
// the syntax is the same to add and remove (unlike highlight) so you
// just need one statement.
image2.mapster('set',
data.selected,
data.key);
}
}
3) 両方のマップが共有するオプションの変数を作成しstateChange、もう一方を制御するマップのイベントでそれを拡張します。これにより、一方向の同期が行われます。両方の方法で同期させたい場合は、stateChange 関数をコピーするか、パラメーターを追加して、どのマップで動作するかを認識できるようにする必要があります。(両方のマップを同じイベントにバインドしただけでは、対象となる同じマップから動作するときに無限ループが発生します)。
var options = {
singleSelect: true,
isDeselectable: false,
fill: true,
fillColor: 'ff0000',
fillOpacity: 0.5
};
$('#map_mini').mapster(options);
$("#map_full").mapster(
$.extend({}, options, {
onStateChange: state_change
}));
それが役立つことを願っています。
アップデート：
発見したように両方の方法で機能させるには、再帰を防ぐ必要があります。
更新された例: http://jsfiddle.net/UrNsH/
まず、最初に両方の画像への参照を作成します。
var image1 = $('#map_full'),image2 = $('#map_mini');
関数ではstate_change、フラグを使用して、コードが現在状態を変更中であることを示します。このようにしstate_changeて、それ自体のアクションの結果として再び発火すると、別のイベントを開始しないことがわかります。これは非常に簡単です。関数の外に変数を作成して、フラグとして使用します。最初に行うことは、現在「変更中」かどうかを確認することです。変更中の場合は、終了してください。そうでない場合は、2 番目の画像でアクションを開始する前に、「変更」を true としてマークします。
ここで行われているもう 1 つのことは、どのイメージに基づいて行動するかを理解する必要があるということです。そのロジックは簡単です。これは、マウス イベントのソースではないものです。thisどちらが画像そのものであるかを確認し、そうでない画像を選択するだけthisです。
thisと比較していることに気付くでしょうimage1[0]。これは、jQuery でよく出てくるものです。thisは実際の DOM 要素ですが、image1とimage2は jQuery オブジェクトです。jQuery オブジェクトなどは配列に似ています。したがって、セレクターの一部である実際の DOM 要素にアクセスするには、インデックスを使用する必要があります。image1[0]の最初の (そして唯一の) メンバーであり、最初のイメージがイベントのソースである場合にimage1一致します。this
var changing = false;
function state_change(data) {
// prevent recursion: exit if already inside this function
if (changing) return;
// set the flag that work is in progress so if something calls this while
// we're busy syncing, it won't try to start again (creating endless recursion)
changing = true;
// switch the image that's not this one.
var target = this===image1[0] ?
image2 :
image1;
// this part is the same as before
if (data.state=='highlight'){
if (data.selected) {
target.mapster('highlight',data.key,true);
} else {
target.mapster('highlight',false);
}
} else if (data.state=='select') {
target.mapster('set', data.selected, data.key);
}
changing=false;
}
それはそれを行う必要があります！