0

Image map is about condo units floor plan.

Everything is functional when the requirements changes.

For some area, altImage:'images/unit.png' is used by default.

New Requirement:

  • Show only the altImage when the unit is still Available

How to achieve the above new requirement? I already tried some test with hardcoded var but altImage is not showing. Please see my code below:

onClick: function (e) {
            var unitStatus="Available";


            $('#selections').html(xref[e.key]);            

            if (unitStatus == 'Available') {                    

                 $('img').mapster('set_options', { 
                   areas: [{
                      key: "Unit1",                    
                      altImage:'images/unit.png',
                      altImageOpacity: 1,
                      altImageFill: true
                    }]
                });
            }
        },

Note: I use onClick function above just to check if my js is properly executed. This is supposed to be dynamically triggered when the unit is *Available*.

Related Question: * Before (1 year ago) I tried to find ways to make some image overlay over an area using css to make it simpler but I find it really hard to accomplished using image mapster but still using it since I find it very lightweight than using flash.

This time, is this possible? or are there any ways to handle this type of overlay image setup? This is just my secondary question though.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Boyd
  • 49
  • 1
  • 1
  • 8

2 Answers2

0

After 'set_options' (it changes the options only, but not take effect immediately) So call 'rebind' to apply new options. It may like this:

$("img).mapster('rebind', $("img").mapster('get_options')); //get_options will get the active options

Check the Doc for more details

rebind: rebind ImageMapster with new options

$('img').mapster('rebind',options); --- options: object a JavaScript object containing ImageMapster options

This method is similar to set_options, in that its purpose is to change options for an existing bound map. However, unlike set_options rebind will immediately apply all the new options to the existing map. This means that rendering options will change areas that are already selected to be rendered with the new options. If you pass area-specific options, these will also be applied, e.g. you could cause new areas to be selected by passing selected: true in an area specific options.

set_options, in contrast only changes the options, and does not apply them to any existing data. When using set_options the new options only apply to future actions.

ryan.dingy
  • 45
  • 1
  • 5
0

I was having problems with the 'set_options' and 'rebind' methods; even after discrete calls as described above.

The technique described here, https://github.com/jamietre/ImageMapster/issues/163, works well for on-going manipulation of area rendering options via JS.

simp
  • 56
  • 3