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

标签 javascript jquery html css wordpress

我正在尝试实现类似于 this site 的效果:

enter image description here

我只是想通过在图像上绘制一个具有定义坐标的多边形来突出显示图像的不同部分,而不是鼠标悬停函数在相应图像周围放置边框。

我在以下位置对我的网站进行了测试:

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

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

我不知道如何 a) 当您将鼠标悬停在 ARM 上时,左侧的相应文本会突出显示,反之亦然(更重要的是,当您将鼠标悬停在文本“Full Arms”上时, ARM 会突出显示。

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

但是我不知道如何在不使用上述插件的情况下调整它以包括图像某些部分的突出显示。

非常感谢任何帮助。

最佳答案

你能把这个放在你的区域标签中吗?

onmouseover="highlight(this.id);"

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

关于javascript - 同时突出显示图像上的文本和多边形形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19412293/

相关文章:

jquery - DataTables 获取特定列的类

javascript - 区分按钮组

javascript - 使用 JavaScript 添加复选框值 PHP、MySQL 和警报框

javascript - 如何在 JavaScript 中编写验证代码

javascript - 尝试将node.js连接到mongodb,获得成功响应但没有连接

html - 当我运行 react 脚本 'yarn start' 时,我在 index.html 中指向 manifest.json 的链接有效,但当我运行 'python3 manage.py runserver' 时无效

javascript - Skrollr 锚定目标问题

php - JavaScript 和 php,数组图像出现故障

Javascript 比较 'Range' 的值

Javascript 数组意外地被 NaN 填充