在 HTML 中单击时如何更改按钮图像答案

【问题标题】：How to change button image when clicked in HTML在 HTML 中单击时如何更改按钮图像
【发布时间】：2015-12-03 08:17:34
【问题描述】：

当一个按钮被点击时，你会如何让组成按钮的图像发生变化？

   #button {
    text-align:center;
    float:left;

    }

   #button:focus {
    text-align:center;
    float:left;
    background-image: url('qmb2.png');

    }


   <input type="image" src="qmb.png" name="saveForm" class="btTxt submit" id="button" height="49.5px" padding = "0px" />

【问题讨论】：

请重新表述您的问题。目前的形式很难理解。
你能提供一个你已经尝试过的例子吗？这只是客户端还是在请求发送到服务器并返回之后？
我将其编辑为我已经尝试过的内容
@MaxR 你为什么不赞成你的答案？点赞不花钱？
甚至没有为满足您需求的答案评分...？

标签： html css image button

【解决方案1】：

使用 jQuery

$("#flowers").click(function () {
    var _this = $(this);
    var current = _this.attr("src");
    var swap = _this.attr("data-swap");
    _this.attr('src', swap).attr("data-swap",  current);
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg'  width="500" height="400" />

使用Javascript

img{height:400px; width:500px}

<script>
    function swap()
{
    if (document.pic.src=='http://www.rachelgallen.com/images/snowdrops.jpg'){

document.pic.src='http://www.rachelgallen.com/images/daisies.jpg';
} 
else if (document.pic.src=='http://www.rachelgallen.com/images/daisies.jpg'){

document.pic.src='http://www.rachelgallen.com/images/snowdrops.jpg';
}
}
</script>
<img src="http://www.rachelgallen.com/images/snowdrops.jpg" name="pic" onclick="swap()"/>

使用纯鼠标悬停/鼠标悬停

img{height:400px; width:500px}

<img src="http://www.rachelgallen.com/images/daisies.jpg" 
onMouseOver="this.src='http://www.rachelgallen.com/images/snowdrops.jpg';"
onMouseOut="this.src='http://www.rachelgallen.com/images/daisies.jpg';">

【讨论】：

我想在 else if 语句中用 go 替换第一张图片吗？
fiddle for mouseover jsfiddle.net/RachGal/qz19sfts fiddle for javascript jsfiddle.net/RachGal/tyfstasn

【解决方案2】：

这里是纯 JavaScript，如果 JQuery 是不可能的......

<input type="image" id="button" name="img" src="firefox.ico" width="50" />
<script>
    document.getElementById("button").addEventListener("click", function(){
        this.setAttribute("src", "chrome.ico");
    });
</script>

并不是说我反对 Rachel 关于纯 JavaScript 使用的回答，但我只是觉得可以写一些更易于阅读的东西来切换图像，例如：

document.getElementById("button").addEventListener("click", function(){
    var path;
    if(this.getAttribute("src") === "firefox.ico")
        path = "chrome.ico";
    else
        path = "firefox.ico";
    this.setAttribute("src", path);
});

IMO 有点简洁，确实不建议在 html 中使用 onclick 属性，而是通过 JavaScript 实现侦听器。

【讨论】：

“chrome.ico”中的内容
要放入的图像的路径而不是原始路径（在您的情况下为 qmb.png）
所以我可以把图片的名称放在“chrome.ico”中
如果页面位于同一文件夹中，是的。但是，如果 html 位于文件夹 site 中并且您的图像位于文件夹 site/images 中，则您必须重新定位路径，如下所示：site/images/chrome.ico（或任何您的图像名称）。这种寻路称为relative pathingsee here

【解决方案3】：

jquery，当你第一次点击时，点击的类会被添加。

$(document).ready(function(){
$('button').on('click', function(){
$(this).toggleClass('clicked');
});
});

还有css：

Button{
Background: img1.jpg;

}
Button.clicked{
Background: img2.jpg;
}

【讨论】：