0

我正在使用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();     
});

不幸的是，这不起作用，事件似乎从未触发——即使我尝试了许多变体。

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

4

3 回答 3

5

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

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

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

于 2012-06-07T17:55:29.457 回答
3

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

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

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

于 2013-10-30T10:24:30.233 回答
1

尝试 ：

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

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

于 2012-05-29T11:57:24.393 回答