Question

A form button has a 170×60 image for the non-pressed and pressed states. What I can’t seem to do is get There to be text in the button. I really want to avoid having to edit the image and write text to it directly. Right now I’m using:

<input type="image" src="img/button_normal.png"
 width="175" height="60" onmousedown="this.src='img/button_pressed2.png'"
 onmouseup="this.src='img/button_normal.png'"> 

I figured that it is impossible to make this work with text on top of it (as far as I have tried). So then I tried using <button> but I couldn’t get it to work either.

I have been able to put text over the image above, but where the text is, the button is unclickable, which doesn’t work.

What is a solution to this problem?

Answer 1

So why not just edit the background image on a regular button?

<script type="text/javascript" src="picker/js/jquery.js"></script>
<!-- some time later -->
<input type="button" src="img/button_normal.png" 
width="175" height="60" value="Some Text"
onmousedown="$(this).css({'background-image': 'img/button_pressed2.png'});" 
onmouseup="$(this).css({'background-image': 'img/button_normal.png'});"> 

That should give you the ability to put an image into a button with some text overlaid.