Question

我的网站包含多个图层作为图层（而不是单独的HTML文件）。

我有三张图片：

<img src="image1.png" onclick="showlayer(1);return false;" />
<br />
<img src="image2.png" onclick="showlayer(2);return false;" />
<br />
<img src="image3.png" onclick="showlayer(3);return false;" />

单击图像时，它会显示相关图层并隐藏其他图层。

我希望它也可以将图像更改为image1_active.png / image2_active.png / image3_active.png，具体取决于哪个图层可见（而不是通过onclick事件处理程序）。

为什么不通过onclick事件处理程序？...

默认情况下，CSS中的第1层设置为可见，因此默认情况下image1也必须是image1_active.png - 因为用户还没有点击任何内容，这就是我需要图片开关来检测图层的可见性/显示以更改图像。

showlayer脚本是：

function showlayer(n){
    for(i=1;i<=3;i++){
        document.getElementById("layer"+i).style.display="none";
        document.getElementById("layer"+n).style.display="block";
    }
}

是否可以为此目的调整此脚本？

谢谢

Answer 1

您可以像这样为图片添加ID：

<img src="image1.png" onclick="showlayer(1);return false;" id="image1" />
<br />
<img src="image2.png" onclick="showlayer(2);return false;" id="image2" />
<br />
<img src="image3.png" onclick="showlayer(3);return false;" id="image3" />

然后在当前脚本中设置活动图像，如：

function showlayer(n){
    for(i=1;i<=3;i++){
        document.getElementById("layer"+i).style.display="none";
        document.getElementById("layer"+n).style.display="block";
        document.getElementById("image"+n).src = 'image' + n + '_active.png';
    }
}

Answer 2

document.onload = function(){
    showlayer(1);
}

function showlayer(n){
    var range = [1, 2, 3];
    range = range.filter(function(item){
        return item != n;
    });

    for(i in range){
        document.getElementById("layer"+range[i]).style.display="none";
        document.getElementById("layer"+range[i]).src = 'image' + range[i] + '.png';
    }

    document.getElementById("layer"+n).style.display="block"; 
    document.getElementById("layer"+n).src = 'image' + n + '_active.png';
}

图像切换基于图层是否可见

2 个答案: