PNG图像被覆盖，但每个图像都有一个链接可以更改，每次一个-Javascript/jQuery/CSS

PNG images overlaid but with a link to change each, one at a time - Javascript/jQuery/CSS

本文关键字：图像 -Javascript CSS jQuery 一个 覆盖 有一个 PNG 链接      更新时间：2023-09-26

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

我正在寻找一些代码，允许我覆盖两层不同的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" />

位置：绝对和z-indexcss属性是您的工具

车门把手的z指数必须高于车门

使用jQuery对行为进行更改，方法是单击链接

在图像周围添加一个包装器div。将其设置为相对位置。为顶部所需的图像指定比底部所需图像更高的z索引。

使用jQuery单击函数可以更改图像标记的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');
});
相关文章：