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();
});

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

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

3 个答案: