I have created a button in javascript and I would like to use an image for the button instead of text, but I have not yet found a way to do this. So far the sources I have referenced are not working for me for some reason. What I have so far is as follows

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

where my image is locoated in the directory /Resources/Icons/appbar.next.rest.png in my project. Can someone point me in the right direction as to how to properly use an image for a button? I am new to javascript so any links, code, or directions would be greatly appreciated!

I have created a button in javascript and I would like to use an image for the button instead of text, but I have not yet found a way to do this. So far the sources I have referenced are not working for me for some reason. What I have so far is as follows

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

where my image is locoated in the directory /Resources/Icons/appbar.next.rest.png in my project. Can someone point me in the right direction as to how to properly use an image for a button? I am new to javascript so any links, code, or directions would be greatly appreciated!

• javascript
• jquery
• windows-phone-7

Share Improve this question Follow edited Apr 13, 2012 at 5:35 sujal 1,05033 gold badges1818 silver badges2929 bronze badges asked Apr 13, 2012 at 3:54 MatthewMatthew 4,0661717 gold badges7070 silver badges132132 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

for example:

    <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>

for adding image to button you can change type of input from button to image:

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

you can modify it.

http://jsfiddle/6HdnU/

Based on this page which remends against input type="image" it seems like using a type="image" could be problem if you're planning on doing anything with the button (on the server or in javascript.

Basically, instead of using the pure-html properties of the buttons to show the input, you should use CSS's background-image property.

js matching yours:

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

and with this 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%;
}

should work.

It's probably worth pointing out that if you're not doing anything with the value of this button then this answer isn't really worth your time. But you had better be sure.