Making an image act like a button

Question

I'm working on a simple HTML page where I have this image that I want to act as a button.

Here is the code for my image:

<div style="position: absolute; left: 10px; top: 40px;"> 
    <img src="logg.png" width="114" height="38">
</div>

And basically I want to add this functionality into it:

<div>
    <input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit"/>
</div>

The text on the button itself that says Submit is not needed as my image has the text it needs.

So anyway, is this possible? and if so, How? :)

score 63 · Accepted Answer · answered Apr 21 '13 at 14:10

63

It sounds like you want an image button:

<input type="image" src="logg.png" name="saveForm" class="btTxt submit" id="saveForm" />

Alternatively, you can use CSS to make the existing submit button use your image as its background.

In any case, you don't want a separate <img /> element on the page.

answered Apr 21 '13 at 14:10

VoteyDisciple

1

Why shouldn't there be a `` element on the page inside the ` – Marvin Nov 25 '18 at 23:32
` – VoteyDisciple Nov 26 '18 at 03:48
5

`` – Marvin Nov 28 '18 at 01:37

score 13 · Answer 2 · edited Jul 09 '14 at 10:17

13

You could implement a JavaScript block which contains a function with your needs.

<div style="position: absolute; left: 10px; top: 40px;"> 
    <img src="logg.png" width="114" height="38" onclick="DoSomething();" />
</div>

edited Jul 09 '14 at 10:17

Eric Brotto

answered Apr 21 '13 at 14:11

mburm

2

Not the best option for forms. – Rishi Dec 07 '14 at 23:55
I believe this would be an accessibility violation as, by default, an image is not focusable/tabbable and clickable with a keyboard. – Roobot Jun 16 '20 at 15:52

score 4 · Answer 3 · answered Apr 21 '13 at 14:14

4

<input type="image"  id="saveform" src="logg.png " alt="Submit Form" />

answered Apr 21 '13 at 14:14

Mudassir Hasan

score 0 · Answer 4 · answered May 05 '22 at 16:36

Here is how I got this to work:

First the css:

    /* resets the button styling */
    button {
      all: unset;
      cursor: pointer;
    }

Then, the html:

<button onclick="submit()">
  <img src="mycoolimage.png" />
</button>

This is cleaner IMO than the input submit approach and allows for ajax without the weird override default submit behavior.

4 Answers4