如何给HTML按钮标签添加图像

Question

我在想是否有办法给HTML按钮标签 <button> 添加一张图片，以便在我的网页上单击图像。这样，当用户单击图像时，我可以使其他事情发生

这似乎不起作用，我想知道它是否可行

HTML代码 -

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

- Matt Murphy

---

你应该使用<div>和其他方式来绑定事件。 - Felix Yan

你尝试过移除宽度和高度会发生什么吗？我认为这应该可以工作，但是宽度和高度设置为10％可能会给你一个极小的图像。 - BlaM

旧贴子——但他所做的确实有效。 - Peter Quiring

Answer 1

不太确定你想要实现什么，但是也许这个例子可以帮忙。

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");
    }); 
});

- Maurice

Answer 2

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

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

- Simone

Answer 3

我曾经遇到过类似的问题，想为以后看到这个帖子的任何人留下这篇文章。

据我的理解，您不是想要一个按钮，而是想要一个可点击的图像作为按钮。 这是我所做的：

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事件来调用函数。

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>

根据你要做的事情和你要操作的内容，本页面上的所有示例都会为你提供更好或更差的方法。使用 onclick 事件在 img 标签中，可以将变量/信息传递给函数以利用，然后让函数将其传递到你的 PHP/ASP 等。此外，如果你正在处理表单，你可以让你的函数处理信息/提交，而不是表单使用的默认提交。在遇到问题时要发挥想象力，并决定哪种方法更好。永远不要只学习一种做事的方法。

- Fata1Err0r

---

img标签无法获得键盘焦点。 - Peter Quiring

Answer 4

通常你不需要使用按钮，你可以用JavaScript将点击事件绑定到图片上。

但如果你必须使用按钮，你可以使用CSS和background-image属性来样式化按钮。

- Declan Cook

---

为了美观的目的而强制要求使用JS来操作一个简单的表单按钮是不太理想的。 - Lèse majesté

img标签也无法获得键盘焦点。 - Peter Quiring