如何同时突出显示图像地图上的多个区域

Question

我正在使用David Lynch 出色的 MapHighlight 插件和美国地图的自定义版本。不幸的是，美国的一些州（如罗德岛）非常小。出于这个原因，我在地图右侧创建了一些方框，其中包含一些较小州的缩写。

我希望能够做的是当用户将鼠标悬停在框或状态上时同时突出显示框和地图。

<area href="#" title="RI" shape="poly" coords="617,141, 617,138, 617,135, 616,131, 620,130, 621,131, 623,133, 625,136, 623,138, 622,137, 622,139, 620,140, 617,141, 617,141"/>
<area href="#" title="RI" shape="rect" coords="728,164,760,182"/>

两个项目共享相同的时间标题。（例如，罗德岛的标题标签是“RI”）

根据 David Lynch 网站上的示例，我认为执行以下操作可能会很有用。

$('area[title]').mouseover(function() {
   $(this).mouseover();     
});

不幸的是，这并没有奏效，事件似乎从未发生过——即使我尝试了许多变体。

我可以做些什么来同步这些元素（以通用方式）并使所有具有相同标题的区域标签在鼠标悬停/悬停时突出显示？

Answer 1

试试 ImageMapster：http ://www.outsharked.com/imagemapster

默认行为应该做你想做的（见演示页面 - 第一个例子是美国地图）。

在小提琴中：http : //jsfiddle.net/juvyh/