[SOLUCIONADO] Boton enviar tipo imagen

[karma274]

Buenas lo que pasa es que tengo un input como tipo imagen con la imagen respectiva pero lo que quiero es que al dar clik colocar otra imagen de un color diferente, ya se que eso se hace por medio de css pero lo que no se es como arreglar mi boton. Lo que quiero decir es como le aplico la propiedad hover a este boton.

Boton con Imagen:

Código HTML:

<input name="enviar" type="image" src="img/startsession.png" width="100px" height="27px" border="0" onClick="controladora.php.send();return false"></input>
 

[veruti85]

Si lo que quieres es cambiar la imagen al clickar, con css es el atributo :active

Código:

#miboton:active{background-image:url(...);}

Saludos

[karma274]

mmm si pero entonces dejo la etiqueta <input> tal y como esta o es necesario que realice algun cambio.

[emprear]

Iniciado por karma274

Buenas lo que pasa es que tengo un input como tipo imagen con la imagen respectiva pero lo que quiero es que al dar clik colocar otra imagen de un color diferente, ya se que eso se hace por medio de css pero lo que no se es como arreglar mi boton. Lo que quiero decir es como le aplico la propiedad hover a este boton.

Boton con Imagen:

Código HTML:

<input name="enviar" type="image" src="img/startsession.png" width="100px" height="27px" border="0" onClick="controladora.php.send();return false"></input>
 

un input image tiene otra función específica, te conviene utilizar un input type button y modificar su propiedad backgroundImage con javascript

Otra cosa poco clara es, "dar click" ú "hover" ? porque son dos cosas completamente diferentes

SAludos

[karma274]

Si tienes razon emprear he hecho lo que me dijiste, pero lo aplique desde css, le agregue un id y lo configure me quedo asi:

Este es el input:

Código HTML:

<input id="startsession" name="enviar" type="button" onClick="controladora.php.send();return false"></input>
 

y el css:

Código CSS:

#startsession{
width:100px;
height:27px;
border:0;
background-image:url(../img/startsession.png);
}
#startsession:hover{
background-image:url(../img/startsessionactive.png);
}
 

Pero ahora la segunda imagen no tome el tamaño de la anterior, ya verifique y las imagenes son del mismo tamaño pues las cree yo y tambien modifique el hover colocando el tamaño que tiene el primero pero tampoco funciono que podria ser?

[emprear]

si ambas imágenes son de 100 x 127, no tendrías que tener problemas, ya que el repeat y el position para el background-image no deberían afectar.
De todas formas a una mejor manera de hacer eso, utilizando solo una imagen para asegurarte que no va a haber ningún parpadeo en el cambio de estado

http://foros.emprear.com/css/over_input/over_input.html

Mirá que en el ejemplo se usa un submit, y en tu caso debería ser un type="button" para el input

SAludos

[karma274]

Al final opte por usar estilos para personalizar mis botones...