Question

我想知道是否有办法给HTML按钮标记<button>一个图像，以便我的网页上的图像可以点击。这样，当用户点击图像时，我可以发生其他事情

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

HTML代码 -

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

Answer 1

不太确定你想要实现的目标，但也许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");
    }); 
});

Answer 2

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

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

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>

通过这样做，你摆脱了正常的＆＃34;按钮＆＃34;图像，您可以使用您想要的任何图像作为可点击按钮。同样，您可以获得与按钮相同的功能，并为实现您的目的开辟了许多其他途径。

希望它有所帮助！

我使用的另一种方法是将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>

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

Answer 4

通常情况下，您不会使用按钮，只需使用JavaScript将click事件绑定到图像上即可。

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

如何给html按钮标记图像

4 个答案: