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> <img src="logg.png" width="114" height="38"> </div>

And basically I want to add this functionality into it:

<div> <input name="saveForm" 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? :)

4 Answers

It sounds like you want an image button:

<input type="image" src="logg.png" name="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.

3

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

<div> <img src="logg.png" width="114" height="38" onclick="DoSomething();" /> </div>
2

You could use an image submit button:

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

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.