Question

我有这段代码：

<input type="button" onclick="alert('A message here');" value="Button"/>

如何使用自己的图片按钮代替标准按钮？

Answer 1

<img src="{{your image url here}}" onclick="alert('A message here');" />

或

<div onclick="alert('A message here');" style="background: url({{your image url here}});background-repeat:no-repeat; width:150px; height:100px;"></div>

Answer 2

如果您使用<button>标记而不是<input type="button">，则可以使用HTML内容填充它：

<button onclick="alert('A message here');" type="button">
  <img src="myurl">
</button>

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

示例：http://jsbin.com/ezeFaYU/1/edit

Answer 3

本身没有图像按钮，但由于您使用的是javascript，因此您可以将click事件添加到图像中。见下面的小提琴。

<img class="button" src="http://goo.gl/UGQl0i" width="100" height="100" onclick="alert('A message here');" >

http://jsfiddle.net/CN8Js/

Answer 4

这应该有效。只需将“img.png”替换为您的图像。

<img src = "img.png" onclick="alert('A message here');"/>

如何使用图像作为按钮而不是标准输入类型按钮？

4 个答案: