Html 单击另一个图像时，如何更改图像按钮？

我用Photoshop创建了四个.PNG作为按钮，两个图像是默认按钮，另外两个是“点击后”按钮。 以下是我为其制作的单独Id的默认按钮：

    #PlayButton {
display: inline-block;
width:10%;
position: relative;
margin-left: auto;
margin-right: auto;

}


#AboutButton {
display: inline-block;
width:10%;
position: relative;
margin-left: auto;
margin-right: auto;
}

我把它们都放在一个叫做“按钮”的类中

---

您可以使用一点JavaScript来解决您的问题

这是第一张图像的代码（单击按钮之前）：

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

打开灯

这是第二张图像的代码（单击按钮后）：

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

关灯

参考：

---

希望这个答案能帮助您解决问题。

图像本身就是按钮。但我会看看javascript会把我带到哪里。