当网页上的鼠标悬停在文本上时，突出显示映射的图像部分 [英] Highlight Section of Mapped Image when Mouseover Text on Webpage

问题描述

场景:

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

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

Desired functionality: When I mouseover the different pieces of text in the list, corresponding areas in the mapped image will become highlighted.

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

Does anyone know of a good javascript tool that can do this?

我找到了一个jQuery插件(地图高亮)，该插件将突出显示当您将鼠标移到图像本身上时.我正在寻找下一步-从图片外部的来源触发高光.

I have found a jquery plugin (map hilight) that will highlight the section of the image as you move your mouse over the image itself. I am looking for the next step - triggering the highlights from a source outside of the image.

推荐答案

我查看了您提到的插件的源代码，扩展它应该很容易，以便它可以按您的意愿进行操作.一些提示:

I looked at the source code for the plugin you mentioned and it should be fairly easy to extend it so that it will do what you want it to do, here a few hints:

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

Line 127-136 of jquery.maphighlight.js:

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

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

This is where all the event magic happens. The mouseover function is used to highlight an area.\

在您的代码中，您可以尝试通过以下操作找到要突出显示的区域坐标:

In your code you could try to find the area coordinates you want to highlight by doing something like this:

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

id_of_the_area是您为要突出显示的<area>标记提供的ID.

Where id_of_the_area would be an id that you gave the <area> tag that you want to highlight.

如果将其放入函数中，则可以在任何需要的地方调用它.

If you put that into a function you can call that from wherever you need it from.

根据您在评论中的问题，这里还有一些其他提示:

Based on your question in the comment, here are some more pointers:

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

The functions to highlight/unhighlight an area could look something like this:

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

在此示例中，id_of_map和id_of_canvas将是map和canvas元素的ID.

In this example id_of_map and id_of_canvas would be the id of the map and canvas elements.

mouseover或clear_canvas函数以及map或canvas变量的范围可能是一个问题.您需要小心放置此代码的位置.建议您在尝试添加此功能之前先阅读一下jquery插件.

The scope of the mouseover or clear_canvas functions and map or canvas variables might be an issue there. You need to be careful on where to place this code. I'd suggest reading up on jquery plugins a bit before you try to add this functionality.

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

In jquery you can attach events to any html element. Like this:

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

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

id_of_element would be the id of the element that you would like to trigger the highlighting.

希望这会有所帮助！

这篇关于当网页上的鼠标悬停在文本上时，突出显示映射的图像部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！