Question

I have two copies of same image map on page.
They have different ID’s, use the same image file and map info.

Now only second map works correctly, if I highlight\click on first map – changes are applied only to second map, not to both of them.

I need both image map works sinchronized: so highlighting and selection would work at the same time on both of them, when you move mouse\click on one of the maps.

How can I do this?

CODE AT HEAD of my page:

<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 AT BODY of my page:

<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

This isn’t hard but there are a couple things to note. Working example is here:

http://jsfiddle.net/gCTcF/

Update: the original example only works one way, this example works two-ways, discussion at end.

http://jsfiddle.net/UrNsH/

1) You can’t bind two images to the same imagemap because ImageMapster considers an area a unique identifier. So simply make a copy and bind the 2nd image to the copy:

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

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

2) You were going in the right direction, you need to use stateChange to sync the maps. The data sent from that event doesn’t quite translate to the code you’ll need to call on the other map, so use a bit of logic to make the right call depending on the event:

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) Create a variable of the options both maps will share, and extend it with the stateChange event for the map that controls the other. This will make a one-way sync. If you wanted it to synchronize both ways, you would need to either copy the stateChange function, or add a parameter so it knows which map it should act on. (If you just bound both maps to the same event, it would cause an infinite loop when acting from the same map it targets).

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
}));

Hope that helps.

Update:

To make it work both ways as you discovered, you have to prevent recursion.

Updated example: http://jsfiddle.net/UrNsH/

First, create a reference to both images at the beginning:

var image1 = $('#map_full'),image2 = $('#map_mini');

In the state_change function, use a flag to indicate that the code is currently in the process of changing state. This way, when state_change fires again as a result of it’s own action, it will know not start another event. This is pretty straightforward: create a variable outside the function to use as a flag. The first thing you do is check if you’re currently “changing”, if so, just quit. If not, mark “changing” as true before starting the action on the 2nd image.

The other thing going on here now is that you need to figure out which image to act on. That logic is easy: it’s the one that the mouse event was not sourced from. You just need to check this which is the image itself and choose the image that isn’t this.

You’ll notice that I am comparing this to image1[0]. This is something that comes up a lot with jQuery. this is an actual DOM element whereas image1 and image2 are jQuery objects. jQuery objetcs are array-like. So to access an actual DOM element that is part of a selector, you must use an index. image1[0] is the first (and only) member of image1, and will match this when the first image is the source of the event.

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;
}

That should do it!