javascript - PNG图像叠加，但有一个链接来改变每一个，一次一个 - Javascript/jQuery/CSS

Question

我真的很挣扎。我对这样的编码有少量知识，但比实际编码更多修改。

我正在寻找一些代码来允许我覆盖 2 层不同的 PNG 图像（一扇门和一个门把手），然后当在页面上单击链接时，每个图层都会更改为不同的图像，例如不同的把手或不同的门样式或颜色。

#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}

#png2 {
position:absolute;
top:0;
left:0;
z-index:0;
}

上面的 CSS 与下面的 HTML 相结合，给了我覆盖，将它放在一个框架中（可能是 DIV ？）然后为 HTML 链接更改图像会很好

<img id="png1" src="aub.png" />
<img id="png2" src="handle1.png" />

Answer 1

position:absolute和z-index css 属性是你的工具

门把手的 z-index 必须高于门

使用 jQuery 通过单击链接来更改行为

Answer 2

在图像周围添加一个包装器 div。将其设置为相对位置。为顶部的图像提供比底部图像更高的 z-index。

使用 jQuery click 函数来改变图像标签的 src 或显示/隐藏其他图像。

假设您使用 .my_link_1 和 .my_link_2 类创建两个链接，作为您要更改的图像的触发器：

$(".my_link_1").click(function() {
  $("#png1").attr('src', 'red.png');
});

$(".my_link_2").click(function() {
  $("#png1").attr('src', 'blue.png');
});