Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making an image act like a button

Tags:

html

button

image

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

like image 345
Kevin Avatar asked Apr 21 '13 14:04

Kevin


3 Answers

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.

like image 108
VoteyDisciple Avatar answered Oct 06 '22 17:10

VoteyDisciple


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>
like image 13
mburm Avatar answered Oct 06 '22 17:10

mburm


You could use an image submit button:

<input type="image"  id="saveform" src="logg.png " alt="Submit Form" />
like image 4
Mudassir Hasan Avatar answered Oct 06 '22 18:10

Mudassir Hasan