Form Button with custom image and text

Question

Solved! Thanks guys!

Okay, in a form I have a button 170x60 with a custom 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.

So is there a solution to my problem?

edit: I should have mentioned that I have been able to put text over the image above, but where the text is, the button is unclickable, which doesn't work.

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.

Incidentally, you COULD do the same thing in pure JS, but the $ operator alone will save you a ton of time on any half-way serious project.

jQuery, it's what's for breakfast.

Answer 2

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

Answer 3

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.