使图像的某个部分亮起

Have a certain part of an image light up?

本文关键字：个部 图像      更新时间：2024-04-10

我正在尝试制作一个交互式图表，用户可以在其中单击"输出"，相关的输出将在图表上亮起。

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

有没有其他方法可以达到我所错过的效果？任何正确的方向都将不胜感激！

谢谢你的帮助！：-）

我建议您存储一张需要为每个名称突出显示的图像区域的地图，并在选择时围绕地图边界绘制，或者可能更改地图区域内或地图区域外所有内容的色调/饱和度。

如果你的图是由div组成的，你可以尝试这种方法：

假设用户点击这个div

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

你会希望下面的div点亮

<div id='pathToOut' class='path1'></div>
<div id='outputBox' class='path1'></div>

使用#inputBox 注册点击事件处理程序

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

以下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';
    }
}

在这种情况下，它只需将边框更改为橙色。你可以在这里找到一个工作示例http://jsfiddle.net/VAFWB/

相关文章：