Foros del Web » Creando para Internet » CSS »

Rollover en imagen como botón de formulario

Estas en el tema de Rollover en imagen como botón de formulario en el foro de CSS en Foros del Web. Hola a todos, Tengo un formulario al que pongo una imagen como botón. Mi pregunta es cómo hacer rollover a esa imagen. En el src ...
  #1 (permalink)  
Antiguo 23/09/2007, 21:08
 
Fecha de Ingreso: septiembre-2007
Mensajes: 1
Antigüedad: 10 años, 2 meses
Puntos: 0
Rollover en imagen como botón de formulario

Hola a todos,
Tengo un formulario al que pongo una imagen como botón. Mi pregunta es cómo hacer rollover a esa imagen.
En el src he puesto la dirección de la imagen con lo que ya la tengo. La cuestión es que luego con hover y background: url ... no se quita la imagen anterior (lógico) y lo más que he conseguido es desplazarla horizontalmente con padding y luego insertar la del rollover, pero al desplazar la imagen original se genera la barra de desplazamiento y además el enlace queda disponible a lo ancho de la web.
Otra cosa que he intentado es desplazarla con left, pero no funciona. No desplaza nada.
Por último he intentado hacer el truco de poner las dos imágenes y mostrar sólo la mitad que interesa al principio y desplazarla al hacer el rollover mostrándose la otra mitad. El problema es que no consigo mostrar sólo la mitad que interesa.
Bueno como veis he mirado cosillas pero nada de nada.
Así está finalmente, pero no me convence por lo que comentado anteriormente. No he encontrado nada que hable de imágenes dentro de formularios. No sé si hay algún impedimento con eso. En realidad no sé casi nada, pues acabo de empezar con el CSS. A ver si me podéis echar una mano.

Muchas gracias

form input#entrar:hover
{
padding: 0 0 0 1000px;
background: url(imagenes/entrarHover.png) no-repeat 0 0;

}
<form method="post" action="login.php">
<ul>
<li>Usuario: </li><li><input id="usuario" type="text" name="loginTxt" size="7" maxlength="7" class="formulario"/></li>
<li>Contraseña: </li><li><input id="pass" type="password" name="passTxt" size="30" maxlength="30" class="formulario"/></li>
<li><input id="entrar" type="image" src="imagenes/entrar.png" name="entrarBtn"/></li>
</ul>
</form>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:45.