如何在单击另一个图像时更改我的图像按钮？答案

【问题标题】：How can I change my image buttons while on click to another image?如何在单击另一个图像时更改我的图像按钮？
【发布时间】：2019-01-24 20:43:12
【问题描述】：

我用 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;
}

我把它们都放在一个名为“Buttons”的类中

<div class="Buttons">
<img src="Play Button.png" id="PlayButton">
<img src="About Button.png" id="AboutButton"> 
</div>

【问题讨论】：

标签： html css button click

【解决方案1】：

您可以使用一点 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>

参考：JavaScript can change HTML attribute values. 希望这个答案可以帮助您解决您遇到的问题。

【讨论】：

图片本身就是按钮。但我会看看 javascript 带我去哪里。