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?

Solution 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.

Solution 2

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.

Solution 3

Why not just use css and a "submit" type?

<input type="submit" class="myButton" value="Label goes here" />

Then in your CSS:

input.myButton{
     background-image: url('img/button_normal.png');
     border-style:none;
}
input.myButton:hover{
    background-image: url('img/button_pressed2.png');
}
input.myButton:active{
    background-image: url('img/button_normal.png');
}

This will work just as well with "button" type, and has an advantage over Javascript versions because Javascript doesn't have to be enabled.

To make this work properly in IE, you can use this script to make IE behave itself :)