Crear botones con rollover es muy sencillo, pero la cosa se complica con botones input para formulario. Para estos casos la mejor opción es el uso de input type="image" combinado con unos sencillos eventos de javascript.
Creamos 2 imágenes con los 2 estados del botón y le ponemos la ruta en el src a la imagen en reposo. Después le añadimos los eventos onmouseover (encima del botón) y onmouseout (fuera). Por último añadimos value="Submit" para que envíe el formulario.
<input type="image" src="img/boton_off.gif" onmouseout="javascript:this.src=img/boton_off.gif'" onmouseover="javascript:this.src='img/boton_on.gif'" value="Submit" />
Esto de podría hacer con estilos, pero en IE 6 obtendremos resultados indeseados.
18/11/09
Suscribirse a:
Enviar comentarios (Atom)
Entradas
hola!!
ResponderEliminargenial tu idea, lo llevaba buscando hace tiempo.
Solo tengo una duda. Tengo un form con varios botones (nuevo, editar...) cuando pongo tu rollover en el primer boton va bien, pero cuando pongo un segundo botón ya no carga la imagen del primero. Tienes q pasar por encima para q se active. Sabes q puede ser?
Gracias
Hola,
ResponderEliminarcreo que la definición de los eventos la tienes cambiada:
onmouseout es fuera del botón, y onmouseover es encima del botón.
un saludo
Buscaba algo así, muchas gracias.
ResponderEliminar