添加图片到按钮的JavaScript(add image to button in javascri

我已经创造了JavaScript的一个按钮，我想用一个形象的按钮，而不是文字，但我还没有找到一个方法来做到这一点。 到目前为止，我的来源有参考的不是为我工作的某些原因。 我至今如下：

使用Javascript

var sb=doc.createElement('input');              
sb.type='button';
//sb.value='Find';
sb.src = "url(/Resources/Icons/appbar.next.rest.png)";
sb.style.height='100%';
//sb.style.width='20%';

在我的图像目录locoated /Resources/Icons/appbar.next.rest.png在我的项目。 有人能指出我在正确的方向如何正确使用图像的按钮？ 我是新来的JavaScript，因此任何链接，代码，或指示将不胜感激！

Answer 1:

添加图片按钮，你可以从按键改变输入型图像：

var body = document.getElementsByTagName("body")[0];
var s = document.createElement("input");
s.src = "http://www.gravatar.com/avatar/a4d1ef03af32c9db6ee014c3eb11bdf6?s=32&d=identicon&r=PG";
s.type = "image";
body.appendChild(s);

你可以修改它。

http://jsfiddle.net/6HdnU/

Answer 2:

Use input type="image", or use a button element with an <img> child.

例如：

    <input type="image" src="art/clips/eightbll.gif" 
     name="input_img" width="63" height="64">

or

    <button type="button" id="input_img"> 
    <img src="art/clips/eightbll.gif" 
     alt="Image input control" width="63" height="64">
    </button>

Answer 3:

基于此页面其中建议对input type="image"好像使用type="image"可能是问题，如果你用按钮做任何事情（在服务器上或在javascript规划。

基本上，而是采用了按键的纯HTML属性来显示输入，你应该使用CSS的background-image属性。

JS匹配你的：

var sb=doc.createElement('input');              
sb.type='button';
sb.class='myImageButton';

与这个CSS：

input.myImageButton {
  border: none;
  cursor: pointer;
  display: inline-block;
  text-indent: -3000px;
  background: url(/Resources/Icons/appbar.next.rest.png) no-repeat 50% 50%;
  /* width: 20%; */
  height: 100%;
}

应该管用。

这也许值得指出的是，如果你没有这个按钮的值做任何事情 ，然后这个答案是不是真的值得你花时间。 但是你最好肯定。

文章来源: add image to button in javascript