，强调部当网页

鼠标悬停文字

场景：，强调部当网页

图像的映射的几个领域。
文本的页面

所需的功能上的一个列表：当我将鼠标放置到不同部分的文字列表，所绘制的图像中相应区域将突出显示。

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

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

来源

2009-12-09 Yaakov Ellis

我看着你提到的插件的源代码，它应该很容易把它扩大，这样它会做你想要它做的事情，这里有一些提示：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>标签。

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

编辑：

基于在评论你的问题，这里有一些更多的指针：

功能突出/ unhighlight的区域可以是这个样子：

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。

希望这会有所帮助！

来源

2009-12-09 15:46:53 Franz

我有点关注你 - 这个函数看起来像什么？它将如何在html中调用？ – 2009-12-09 19:49:07

我在上面添加了一些指向我的帖子的指针！ – Franz 2009-12-10 10:53:16

Highslide不完全是你问什么，but worth a look.

来源

2009-12-09 15:33:38 Upperstage

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

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

同样适用于鼠标移出。当然，这比使用onmousover和onmouseout更好地进行。

来源

2009-12-09 15:48:45

，强调部当网页

回答

相关问题