1

设想：

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

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

有谁知道可以做到这一点的好的javascript工具吗？

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

4

3 回答 3

2

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

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的标签的 id 将在哪里。<area>

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

编辑：

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

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

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

在这个例子中id_of_map，andid_of_canvas是地图和画布元素的 id。

mouseoverorclear_canvas函数和mapor变量的范围canvas可能是一个问题。您需要小心放置此代码的位置。我建议您在尝试添加此功能之前先阅读一下 jquery 插件。

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

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

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

希望这可以帮助！

于 2009-12-09T15:46:53.073 回答
2

虽然这不是超级优雅，但您可以手动触发相关区域元素的 mouseover 事件：

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

同样适用于鼠标移出。当然，这比使用onmousoverand更好onmouseout。

于 2009-12-09T15:48:45.083 回答
0

Highslide 并不完全符合您的要求，但值得一看。

于 2009-12-09T15:33:38.247 回答