Reputation: 1475
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? :)
Upvotes: 37
Views: 254531
Reputation: 13216
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.
Upvotes: 2
Reputation: 1493
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>
Upvotes: 13
Reputation: 28781
You could use an image submit button:
<input type="image" id="saveform" src="logg.png " alt="Submit Form" />
Upvotes: 4
Reputation: 37823
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.
Upvotes: 64