同时突出显示图像上的文本和多边形

Question

我正在努力实现类似于this site的效果：

只是代替鼠标悬停功能在相应的图像周围放置边框，我想通过在图像上绘制一个定义了坐标的多边形来简单地突出显示图像的不同部分。

我对我的网站进行了测试：

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

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

我无法弄清楚如何a）当鼠标移到手臂上时左侧的相应文字会突出显示，反之亦然（更重要的是），当鼠标悬停在文本上时，手臂会突出显示＆＃34; Full Arms ＆＃34;

有一个类似的帖子叫Javascript Newbie: How to highlight text and image in different divs on mouseover。

但是我无法弄清楚如何调整它以包括突出显示图像的某些部分而不使用上面提到的插件。

非常感谢任何帮助。

Answer 1

你能把它放在你的区域标签吗？

onmouseover="highlight(this.id);"

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