Using images as buttons

Question

I'm working on a calculator script which is working fine. (got it form a tutorial). Now I want the buttons to be images. for example 1.jpg 2.jpg etc.

<html>
<form name="calculator">
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
 
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>

I think in this post you can find answer [link](https://stackoverflow.com/questions/8683528/embed-image-in-a-button-element) — Sunimal S.K Malkakulage, Mar 08 '18 at 22:04
Possible duplicate of [Put icon inside input element in a form](https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form) — Liora Haydont, Mar 08 '18 at 22:21

score 0 · Answer 1 · answered Mar 08 '18 at 22:03

0

You can simply use image as input type for your form elements. That should work for you i think. :)

answered Mar 08 '18 at 22:03

Arwez

134
1
2
8

jdgregson · Answer 2 · 2018-03-08T22:16:29.733

You should use the <img src="image.jpg"> tag, like:

<html>
    <form name="calculator">
        <img src="1.jpg" onClick="document.calculator.ans.value+='1'">
        <img src="2.jpg" onClick="document.calculator.ans.value+='2'">
        <img src="3.jpg" onClick="document.calculator.ans.value+='3'">
        <img src="4.jpg" onClick="document.calculator.ans.value+='4'">
        <img src="5.jpg" onClick="document.calculator.ans.value+='5'">
        <img src="6.jpg" onClick="document.calculator.ans.value+='6'">
        <img src="7.jpg" onClick="document.calculator.ans.value+='7'">
        <img src="8.jpg" onClick="document.calculator.ans.value+='8'">
        <img src="9.jpg" onClick="document.calculator.ans.value+='9'">
        <img src="minus.jpg" onClick="document.calculator.ans.value+='-'">
        <img src="plus.jpg" onClick="document.calculator.ans.value+='+'">
        <img src="mult.jpg" onClick="document.calculator.ans.value+='*'">
        <img src="div.jpg" onClick="document.calculator.ans.value+='/'">
        <img src="0.jpg" onClick="document.calculator.ans.value+='0'">
        <input type="reset" value="Reset">
        <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
        <br>Solution is <input type="textfield" name="ans" value="">
    </form>
</html>

Note that this assumes your images are in the same folder as your .html file. If they are in a sub folder, like "images", you would do <img src="images/image.jpg">.

Thank you for the fast respons but when i add onclick to image the image is unclickable. Kind regard, Jorick — Jorick, Mar 08 '18 at 22:20
Click "Run code snippet" on my answer and see if it works there. It works in my browser, Chrome. — jdgregson, Mar 08 '18 at 22:22

score 0 · Answer 3 · answered Mar 08 '18 at 22:14

0

If you use the <button> tag instead of <input type="button" you can just do this:

<button>
<img src="example.jpg" />
</button>

Moshiach now!

answered Mar 08 '18 at 22:14

Don't Know

121
2
12

Thank you for your help, when im putting it like that it changes my adres file:///D:/Games/Calculator/calc.html to file:///D:/Games/Calculator/calc.html?ans=0 – Jorick Mar 08 '18 at 22:17
try ``. Also, for convention, you should write "onclick" without capital letters (except for in JavaScript when you MUST use "onClick") – Don't Know Mar 08 '18 at 22:25

score 0 · Answer 4 · answered Mar 08 '18 at 22:19

If you want to use that code and just want to add images to the buttons, you can use CSS:

<style>
  Form input[type=button]:first-child {background: url(/image/btn1.png) no-repeat;}
  Form input[type=button]:nth-child(2) {background: url(/image/btn2.png) no-repeat;}
</style>

You can read more about CSS pseudo-class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Also, Maybe this old quetions (and answers) will help:

How to add background image for input type="button"?

html input with background image

BTW - I think you should write your own calculator script - it is a basic must...

Good Luck!

Using images as buttons

4 Answers4