ImageMapster: Highlight all the areas but select a specific area on click on list item and show other areas selected with less opacity

Question

I have referred below example: http://jsfiddle.net/jamietre/gjH5c/

I need exactly same functionality.

But change is - highlight all the areas on load. Hence used staticState: true. But use of the above option disabled effect of area highlight on click of the listed item.

What I need is - on click of list item, I want to highlight/select that corresponding area but at the same time keep the highlighting of other areas as it is with less opacity.

I tried changing the code for .mapster as below:

var img=$('img').mapster({
mapKey: 'state',
singleSelect: true,
render_highlight: {
fillOpacity: 0.8
},
render_select: {
fillOpacity: 0.4
},
staticState: true,
singleSelect: true,
});

I also tried using .snapshot and .rebind method as shown in : http://jsfiddle.net/6maJw/

It didn't work. Please tell me if I am missing something.

Thanks a lot in advance

Answer 1

I tried to do it with ImageMapster for hours until I decide to write my own plugin: https://github.com/gestixi/pictarea

By default, when you instanciate it, it will highlight all the areas. You can specify different styles for areas which are normal, hovered, selected and disabled.

You can also add events handler to display, for example, a tooltip when a zone is hovered.