Question

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

我一直在寻找一种方法来使用css或js，但无法找到一种方法让它工作。我已经考虑过使用background-position来实现图像精灵，但是如果这是我必须做的事情，我认为图像文件太大了。

有没有其他方法可以达到我失踪的效果？正确方向的任何一点都将受到赞赏！

感谢您的帮助！： - ）

Answer 1

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

Answer 2

如果你的图表是由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/

找到一个有效的例子

让图像的某个部分亮起来吗？

2 个答案: