Botón de formulario con imagen personalizada y texto

Question

Un botón de formulario tiene una imagen de 170x60 para los estados sin presionar y presionar. Lo que parece que no puedo hacer es llegar al texto en el botón. Realmente quiero evitar tener que editar la imagen y escribirle texto directamente. En este momento estoy usando:

<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'"> 

que pensé que es imposible hacer este trabajo con el texto en la parte superior de la misma (por lo que he probado). Entonces intenté usar <button> pero tampoco pude hacerlo funcionar.

He podido poner texto sobre la imagen de arriba, pero donde está el texto, el botón no se puede hacer clic, lo que no funciona.

¿Cuál es la solución a este problema?

Answer 1

¿Por qué no solo edita la imagen de fondo con un botón normal?

<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'});"> 

Eso debería darle la capacidad de poner una imagen en un botón con texto superpuesto.

Answer 2

¿Por qué no usar CSS y un tipo "enviar"?

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

Luego, en el 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'); 
} 

Esto funcionará igual de bien con el tipo "botón", y tiene una ventaja sobre las versiones de Javascript Javascript porque no tiene que estar habilitado.

Para que esto funcione correctamente en IE, se puede utilizar para hacer this script IE se comportan en sí :)

Answer 3

El <input type="image"> está destinado a tener una especie de mapa de imagen como botón. Cuando se envía, envía un parámetro name.x y name.y al lado del servidor que denota la ubicación exacta donde el cliente ha presionado en el mapa de imagen.

Obviamente no quiere tener eso. Solo desea tener un botón con una imagen de fondo. Para eso normalmente usa la propiedad CSS background-image para (o, más convenientemente, la propiedad background).

ejemplo básica:

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

con el botón normal de la siguiente manera:

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

Editar: para downvoters o nitpickers JS/jQuery: IE lte 7 hace no apoyo la :hover ni :active pseudoselectors en otros elementos que el elemento a. La solución anterior es compatible con crossbrowser.