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

デフォルトでは、インスタンス化すると、すべての領域が強調表示されます。通常、ホバー、選択、および無効の領域にさまざまなスタイルを指定できます。

また、イベント ハンドラーを追加して、たとえば、ゾーンがホバーされたときにツールチップを表示することもできます。