Javascript 图像的某个部分亮起了吗？

我正在尝试制作一个交互式图表，用户可以点击，比如说“输出”，相关的输出将在图表上亮起

我一直在寻找一种使用css或js来实现这一点的方法，但我真的无法找到一种让它工作的方法。我曾经考虑过使用背景位置来实现这一点，但是我认为如果这是我必须要做的，图像文件会太大

有没有其他方法可以达到我所缺少的效果？只要方向正确，我们将不胜感激

---

谢谢你的帮助！：-）

我建议您存储需要为每个名称高亮显示的图像区域的地图，并在选择时画出地图边框，或者可能更改地图区域内或之外所有内容的色调/饱和度。

如果您的图表由div组成，您可以尝试以下方法：

让我们假设用户应该点击这个div

<div id='inputBox' class='path1'></div>

以下

lightPath

函数将处理

click

事件，并在文档中扫描类为“path1”的所有元素

function lightPath() {
    // get class of clicked item
    var itemClass = this.className; // eg. 'path1'

    // get all elements with same class
    var pathElems = document.body.getElementsByClassName('path1');

    // go through each element and change its border color etc..
    for(var x = 0; x < pathElems.length; x++) {
        pathElems[x].style.borderColor = 'orange';
    }
}

函数光路（）{
//获取已单击项的类
var itemClass=this.className；//例如“path1”
//使用相同的类获取所有元素
var pathElems=document.body.getElementsByClassName（'path1'）；
//检查每个元素并更改其边框颜色等。。
对于（var x=0；x

---

在这种情况下，它只会将边框更改为橙色。您可以在此处找到一个工作示例

感谢您的回复！你认为你可以把我链接到一些关于如何存储我需要的图像区域地图的信息吗？我以前从未听说过这一点：（图像地图是古老的html技术，看一看或谷歌html图像地图。你也会发现这个，（），回答很有用。哦，哇，我没意识到你指的是一张真实的图像地图！我已经很久没有用过了。谢谢你提供的信息！这看起来正是我需要的。看看，这可能会有很大的帮助。

window.addEventListener('load',function() {
    document.getElementById('inputBox').onclick = lightPath;
},false);

function lightPath() {
    // get class of clicked item
    var itemClass = this.className; // eg. 'path1'

    // get all elements with same class
    var pathElems = document.body.getElementsByClassName('path1');

    // go through each element and change its border color etc..
    for(var x = 0; x < pathElems.length; x++) {
        pathElems[x].style.borderColor = 'orange';
    }
}