Input type button with image

Question

I want an event to be triggered when the image is clicked, but I cannot figure out how to make that happen. Is it possible for an event to be triggered when an image is clicked?

<form>
  <input type="button" name="button" value="Download" onclick="passWord()" class="button"/>
</form>

jsfiddle: https://jsfiddle.net/29mf5wf9/

You should use an input type "image": http://stackoverflow.com/questions/3381609/button-image-as-form-input-submit-button — Simon Deconde, Feb 26 '16 at 16:49

Lal · Answer 1 · 2016-02-26T17:38:55.543

3

See this fiddle

You can use image instead of button for input type. It will still be a button.

HTML

<input type="image" src="image/path" name="button" value="Download" onclick="passWord()" class="button"/>

According to the docs

The <input type="image"> is a graphical submit button.

See the updated fiddle with a javascript function working..

edited Feb 26 '16 at 17:38

answered Feb 26 '16 at 16:51

Lal

14,726
4
45
70

is it ok if you use jQuery? – Random Channel Feb 26 '16 at 17:11
@RandomChannel jQuery for what? to add the image? – Lal Feb 26 '16 at 17:12
for when the image is clicked – Random Channel Feb 26 '16 at 17:57

score 1 · Answer 2 · answered Feb 26 '16 at 16:59

1

You need to specify image in the type.

<form>
    <input type="image" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" name="button" value="Download" onclick="passWord()" class="button"/>
</form>

answered Feb 26 '16 at 16:59

WWPTV

11
4

Kaan Burak Sener · Answer 3 · 2016-02-26T17:37:41.907

1

Here you can find the information: http://www.w3schools.com/tags/att_input_src.asp

<input type="image" src="your_image.png" name="button" value="Download" alt="Download" onclick="passWord();" class="button" width="your_image_width" height="your_image_height">

edited Feb 26 '16 at 17:37

answered Feb 26 '16 at 17:03

Kaan Burak Sener

974
10
19

the button "runs" a script that verifies a password to download a file, if i use input type image it doesnt run the script, just refreshes the page.... – questionador Feb 26 '16 at 17:31
If the another answers work, use one of them. If it is not, I can solve it and re-edit my answer in 2 minutes @questionador – Kaan Burak Sener Feb 26 '16 at 17:34
I have edited my answer, could you please check it @questionador ? – Kaan Burak Sener Feb 26 '16 at 17:38
is it possible to add a authentication form to that button? or is it just dumb for me to try to do it that way? – questionador Feb 09 '17 at 10:11

Input type button with image

3 Answers3

See this fiddle