ImageMapster with multiple images and maps

Question

Is it possible to use ImageMapster with multiple images and maps?

In my scenario, there are multiple images. Each image has its own unique map, and only one image is displayed at a time. When part of one image is clicked, it changes to another image, with a different map. I do this by directly changing the element's "src" and "useMap" values. However, ImageMapster will only work on the first image, and the rest will not be highlighted. I have tried unbinding and rebinding ImageMapster before and after changing the image/map, and that does not help.

How can I make this work with ImageMapster?

Answer 1

Yes, you can have multiple images with imagemapster image maps, but I suspect you will have a very rough go of it if you try changing DOM elements on the fly.

Recall the difference in how jQuery works with injected elements vs. elements present at DOM creation. For injected elements, jQuery must use the .on() method to trap their events, yes? Well, when you change DOM elements on the fly, you remove/reinject them in the DOM. Therefore, the plugin -- which was initialized to the previous element -- must now be initialized to the newly injected element, and it must be able to use .on() tactics to manipulate that new element. That is asking quite a lot from a plugin.

However, all is not lost.

jsFiddle demo

Above jsFiddle is a working example, cobbled together from two of the developer's own examples, that shows a rough approximation of what you described in your question. Two image maps are on the same page, but one is initially hidden (I use only two images/imagemaps, but there could be several initially hidden, not just one).

When the first image map is clicked, in imagemapster's onClick callback, I hide the div that contains that image and unhide the next image div. It really is this simple:

var image = $('#vegetables');
image.mapster(
{
    fillOpacity: 0.4,
    onClick: function (e) {
        var newToolTip = defaultDipTooltip;
        $('#statemapDIV').show();  <====================
        $('#veggieDIV').hide();    <====================
    },
    toolTipClose: ["tooltip-click", "area-click"],
    areas: [
        {
            key: "dip",
            toolTip: defaultDipTooltip
        },
        {
            key: "asparagus",
            strokeColor: "FFFFFF"
        }
        ]
});

I hope this solution will work for you.

Answer 2

How many different images (and image maps) do you have?

Unless they are to many, I would preload all images and image maps in different DIVs, and hide all of them except the first one. Then you can use .hide() and .show() to hide the DIV containing the current image and show the DIV with the image you wish to show. That way each image can have it's own image map, without the need to change the DOM on the fly.

One warning though: I have had problem activating imagemapster on images in hidden DIVs. In IE8, when showing the DIV, the image stays invisible if imagemapster is activated on the image while the DIV was hidden. Maybe this is due to some circumstances specific to my case, but if IE8 functionality is important to you, I suggest you do some testing before embracing this solution entirely.