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? :)

up vote 47 down vote accepted

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.

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>
  • 1
    Not the best option for forms. – Rishi Dec 7 '14 at 23:55

You could use an image submit button:

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

protected by Community Oct 19 '17 at 19:29

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.