0

我有一个网站，其中包含多个页面作为图层（而不是单独的 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 事件处理程序？...

第 1 层在 CSS 中默认设置为可见，因此默认情况下 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";
    }
}

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

谢谢你

4

2 回答 2

0

您可以像这样为图像添加 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';
    }
}
于 2012-12-16T05:16:47.647 回答
0 
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';
}
于 2012-12-16T05:25:42.360 回答