Form Button with custom image and text

Question

A form button has a 170x60 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

The <input type="image"> is meant to have sort of an image map as button. When submitted, it sends a name.x and name.y parameter to the server side which denotes the exact location where the client has pressed on the image map.

You obviously don't want to have that. You just want to have a button with a background image. For that you normally use the CSS background-image property for (or, more conveniently, the background property).

Basic example:

.mybutton {
    background-image: url('normal.png');
    width: 175px;
    height: 60px;
}
.mybutton.pressed {
    background-image: url('pressed.png');
}

with the normal button as follows:

<input 
    type="submit"
    class="mybutton" 
    value=""
    onmousedown="this.className+=' pressed'"
    onmouseup="this.className=this.className.replace(' pressed', '')"
>

Edit: for downvoters or JS/jQuery nitpickers: IE lte 7 does not support the :hover nor :active pseudoselectors on other elements than the a element. The above solution is crossbrowser compatible.