如何给html按钮标签一个图像答案

【问题标题】：How to give html button tag an image如何给html按钮标签一个图像
【发布时间】：2012-02-07 18:22:57
【问题描述】：

我想知道是否有办法为 HTML 按钮标签 <button> 提供图像，以便在我的网页上可以点击该图像。这样当用户点击图片时，我可以让其他事情发生

这似乎不起作用，并且想知道它是否可能

HTML 代码 -

<button>
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
</button>

【问题讨论】：

你应该使用
并以其他方式绑定事件。
您是否尝试过删除宽度和高度时会发生什么？我会说这应该可以，但是 10% 的宽度和高度可能会给你一个非常很小的图像。
旧帖子 - 但他所拥有的确实有效

标签： html button

【解决方案1】：

我遇到了类似的问题，并认为我会为将来看到此帖子的任何人放弃此帖子。

据我了解，您需要的不是按钮，而是充当按钮的可点击图像。这是我所做的：

HTML：

<img src="images/dagger.png" width="10%" height="10%" id="dagger" />

JavaScript/jQuery：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
 $("#dagger").click(function(){
     // what you wanted your button to do when user clicks it    
 });
</script>

通过这种方式，您摆脱了正常的“按钮”图像，您可以使用任何您想要的图像作为可点击按钮。此外，您还可以从按钮中获得您想要的相同功能，并为实现您的目的开辟了许多其他途径。

希望对您有所帮助！

我使用的另一种方法是将onclick 事件放在img 本身上以调用函数。

html:

<img src="images/dagger.png" width="10%" height="10%" id="dagger" onclick="myFunction()" />

JS：

<script>
 myFunction() {
   // what I want to happen if user clicks image
 }
</script>

根据您正在做什么以及您试图操纵什么，本页上的所有示例都将为您提供更好/更差的操作方式。使用img 标记中的onclick 事件，您可以将变量/信息传递给要使用的函数，然后让函数将其中继到您的PHP/ASP/等。同样，如果您正在处理表单，您可以让您的函数处理信息/提交，而不是表单使用的默认提交。用你的想象力来解决你遇到的问题，然后决定哪种方法效果更好。永远不要满足于只学习一种做事的方法。

【讨论】：

img 标签无法获得键盘焦点

【解决方案2】：

不太确定您要达到的目标，但 this 示例可能会有所帮助。

HTML

<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>

JavaScript

$(function(){
    $("#dagger").click(function(){
        alert("click");
    }); 
});

【讨论】：

【解决方案3】：

通常您不会使用按钮，您可以使用 JavaScript 将点击事件绑定到图像。

但是如果你必须有一个按钮，你可以使用 CSS 和 background-image 属性来设置按钮的样式。

【讨论】：

强制一个简单的表单按钮要求 JS 用于美学目的是不可取的。
img 标签也无法获得键盘焦点

【解决方案4】：

您可以将图像设置为按钮背景

button {
    background-image:url('images/dagger.png');
}

【讨论】：