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>