Question

场景：

映射了多个区域的图像。
页面上的文字列表

所需功能：当鼠标悬停在列表中的不同文本片段时，映射图像中的相应区域将突出显示。

有没有人知道一个可以做到这一点的好的javascript工具？

我找到了一个jquery插件（map hilight），当您将鼠标移到图像本身上时，它会突出显示图像的部分。我正在寻找下一步 - 从图像外部的源触发高光。

Answer 1

我查看了你提到的插件的源代码，扩展它应该相当容易，以便它可以做你想做的事情，这里有一些提示：

jquery.maphighlight.js的第127-136行：

mouseover = function(e) {
   var shape = shape_from_area(this);
   add_shape_to(canvas, shape[0], shape[1], $.metadata ? $.extend({}, options, $(this).metadata()) : options);
};

if(options.alwaysOn) {
   $(map).find('area[coords]').each(mouseover);
} else {
   $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); });
}

这是所有事件魔法发生的地方。鼠标悬停功能用于突出显示某个区域。\

在您的代码中，您可以通过执行以下操作来尝试查找要突出显示的区域坐标：

$(map).find('#id_of_the_area[coords]').each(moseover);

其中id_of_the_area是您为要突出显示的<area>标记的ID。

如果你将它放入一个函数中，你可以从任何需要的地方调用它。

修改

根据你在评论中的问题，这里有一些指示：

突出显示/取消突出显示某个区域的功能可能如下所示：

function highlight(e) { $(map).find('#id_of_the_area[coords]').each(moseover); } function unHighlight(e) { clear_canvas($(canvas)); }

在此示例中，id_of_map和id_of_canvas将是地图和画布元素的ID。

mouseover或clear_canvas函数以及map或canvas变量的范围可能是一个问题。您需要注意放置此代码的位置。在尝试添加此功能之前，我建议稍微阅读jquery插件。

在jquery中，您可以将事件附加到任何html元素。像这样：

$('#id_of_element').mouseover(highlight); $('#id_of_element').mouseout(unHighlight);

id_of_element将是您要触发突出显示的元素的ID。

希望这有帮助！

Answer 2

虽然这不是超级优雅，但您可以手动触发有问题的区域元素的鼠标悬停事件：

<a href="..." onmouseover="$('#certain-area')
       .trigger('mouseover');">link text</a>

同样适用于mouseout。当然，与使用onmousover和onmouseout相比，这样做更好。

Answer 3

Highslide并不完全符合您的要求，but worth a look.

鼠标悬停在网页上的文本时突出显示映射图像的部分

3 个答案: