同时突出显示图像上的文本和多边形形状 [英] Highlight text and a polygon shape on an image simultaneously

问题描述

我试图达到类似于

我在Wordpress中使用一个名为ImageMapper的插件来创建您在网站上看到的图像地图。现在，例如，当您将鼠标悬停在手臂上时，图像上的手臂区域会突出显示。

我无法弄清楚如何：a）当鼠标悬停在手臂上时，左侧会突出显示，反之亦然（更重要的是），当您将鼠标悬停在文字全手臂上时，手臂会突出显示。

有点类似的帖子称为 Javascript新手：如何在鼠标悬停时在不同div上突出显示文本和图片。

然而，我无法弄清楚如何适应，以包括某些部分的突出显示没有使用上面提到的插件的图片。

任何帮助都非常感谢。

解决方案

$ b

  onmouseover =highlight（this.id）; 
  

然后你可以做一个简单的javascript函数来改变相应链接的类。

I am trying to achieve an effect similar to this site:

only instead of the mouseover function putting a border around the corresponding image, I want to simply highlight different parts of the image by drawing a polygon with defined coordinates over the image.

I have a test of my site up at:

http://perfectdays.ca/image-map/

I used a plugin called ImageMapper in Wordpress to create the image map as you see it on the site. Right now, when you mouseover the arms, for example, the arm regions on the image are highlighted.

I cannot figure out how to a)have the corresponding text on the left get highlighted when you mouseover the arms, or vice versa (and more importantly), have the arms highlight when you mouseover the text "Full Arms."

There was a somewhat similar post called Javascript Newbie: How to highlight text and image in different divs on mouseover.

However I cannot figure out how to adapt that to include the highlighting of certain parts of the image without using the plugin mentioned above.

Any help is much appreciated.

解决方案

Are you able to put this in your area tags?

onmouseover="highlight(this.id);"

Then you can just make a simple javascript function that changes the class of the corresponding link.

这篇关于同时突出显示图像上的文本和多边形形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！