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

Question

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

我希望能够在用户将鼠标悬停在框或州上时同时突出显示框和地图。

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

Answer 2

我知道这是一个老问题，但正如 this SO question 中所述：
maphilight 函数有一个 groupBy 函数。在您的情况下，您可以执行以下操作：

$('.mapimage').maphilight({ groupBy: 'title' });

将按区域的标题分组（尽管您可以选择区域的任何属性）。

Answer 3

试试：

$('area').mouseover(function() {
    $('area[title="'+$(this).attr('title')+'"]').mouseover();
});

这会处理所有area 元素上的mouseover 事件，然后使用title 属性在所有具有相同标题的匹配区域上触发mouseover 事件