ImageMapster：2つのイメージマップを同期する方法は？

Question

私は同じイメージマップを2枚コピーしています。 IDが異なっていて、同じ画像ファイルと地図情報を使用しています。

最初のマップを強調表示してクリックすると、2番目のマップのみが正しく動作します。変更は2番目のマップにのみ適用され、両方には適用されません。

私は両方のイメージマップの作業を必要としています：ハイライトと選択は、マップのいずれかをマウスでクリックしたときに、両方で同時に動作します。

どうすればいいですか？私のページのHEAD AT

CODE：私のページのBODY AT

<script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
<script src="jquery.imagemapster.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    function state_change(data) { } 

    $("#map_mini,#map_full").mapster({ 
     singleSelect: true, 
     isDeselectable: false, 

     fill: true, 
     fillColor: 'ff0000', 
     fillOpacity: 0.5,  

    // onStateChange: state_change, 
    }); 
}); 
</script> 

CODE：

<map name="map"> 
    <area shape="rect" group="rect" alt="" coords="25,38,102,104" href="#" /--> 
    <area shape="circle" group="circle" alt="" coords="185,160,30" href="#" /--> 
    <area shape="poly" group="poly" alt="" coords="230,62,237,25,276,20,291,55,264,80,230,62" href="#" /--> 
</map> 

<h1>MAP1</h1> 
<img src='map.png' width='320' height='240' id='map_full' usemap="#map"> 
<h1>MAP2</h1> 
<img src='map.png' width='320' height='240' id='map_mini' usemap="#map"> 

Answer 1

これは難しいことではありませんが、注意すべきカップルの事があります。更新

http://jsfiddle.net/gCTcF/

：例作業はここにある元の例では、一方向にのみ動作します、この例では、二通り、最後に議論を動作します。 ImageMapsterは地域固有の識別子考慮するため

http://jsfiddle.net/UrNsH/

1）あなたは、同じイメージマップに2枚の画像をバインドすることはできません。だから、単純にコピーを作成し、コピーに第二の画像をバインドする：あなたは正しい方向に向かった

var map = $('map[name="map"]'), 
    clone = map.clone().attr('name', 'map2'), 
    image2 = $('#map_mini'); 

map.after(clone); 
image2.attr('usemap', '#map2'); 

2）、あなたはマップを同期するためにstateChangeを使用する必要があります。そのイベントから送られたデータは非常にあなたが他のマップ上で呼び出す必要がありますコードに変換し、そのイベントに応じて、右の呼び出しを行うためにロジックのビットを使用していません：

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オブジェクトはarray-likeです。したがって、セレクタの一部である実際の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; 
} 

これはすべきです！

Answer 2

（ここでは、双方向のsinchronizationとのトラブルについてnotcieた。 この通知は、jamietreが彼のunswerを更新した後、これ以上の理由を持っていないので、私はそれを削除した）