【问题标题】: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 带我去哪里。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-02-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-13
    • 2013-07-24
    • 1970-01-01
    相关资源
    最近更新 更多