Добавить изображение к кнопке в javascript

Question

Я создал кнопку в 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

на основе this page который рекомендует против input type="image" это кажется, как с помощью type="image" может быть проблемой, если вы планируете делать что-либо с помощью кнопки (на сервере или в JavaScript.

В принципе, вместо использования свойств pure-html кнопок для отображения ввода, вы должны использовать свойство background-image CSS.

js matching yours:

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%; 
} 

должен работать.

Возможно, стоит отметить, что если вы не делаете ничего со значением этой кнопки, то этот ответ на самом деле не стоит вашего времени. Но вы должны быть уверены.