jquery - 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

我尝试用 ImageMapster 做几个小时，直到我决定编写自己的插件：https ://github.com/gestixi/pictarea

默认情况下，当您实例化它时，它将突出显示所有区域。您可以为正常、悬停、选中和禁用的区域指定不同的样式。

您还可以添加事件处理程序以显示，例如，当区域悬停时显示工具提示。