Cambiar imagen de un botón

[Wuanchi]

Buenas a todos.

¿Cómo puedo hacer un botón de tipo submit que cambie su imagen cuando paso el ratón sobre él?

Muchas gracias.
Un saludo.

[davier]

Dreamweaver te genera el script directamente para dos imagenes....no se si con el boton de submit seria lo mismo pruebalo....para cambiar imagenes es en insertar/objetos de imagen/imagen de substitucion....hay te generara el codigo que se utiliza para cambiar dos imagenes en mouse over por ejemplo okis
espero k te sirva un saludo

[quimfv]

Aqui lo explican:



Rollover buttons & icons with CSS

Quim

[Wuanchi]

Pero ahí no dicen cómo hacer un botón que cambie su imagen cuando pasas el ratón por encima o cuando clickas, ahí ponen como hacer eso con un link, y éso no es lo que necesito.
Yo quiero que cambie la imagen del botón submit de un formulario.
¿Eso es posible?

[caricatos]

Hola:

Dentro de un tag button puedes poner un simple rollover:

<button type="submit" ><img src="imagen1.gif"
onmouseover="this.src = 'imagen2.gif'"
onmouseout="this.src = 'imagen1.gif'" /></button>

Saludos

[Wuanchi]

Iniciado por caricatos

Hola:

Dentro de un tag button puedes poner un simple rollover:

<button type="submit" ><img src="imagen1.gif"
onmouseover="this.src = 'imagen2.gif'"
onmouseout="this.src = 'imagen1.gif'" /></button>

Saludos

Con este código, no sólo no cambia de imagen, sino que además no envía el formulario :).
De todos modos... gracias.

[quimfv]

Iniciado por Wuanchi

Pero ahí no dicen cómo hacer un botón que cambie su imagen cuando pasas el ratón por encima o cuando clickas, ahí ponen como hacer eso con un link, y éso no es lo que necesito.
Yo quiero que cambie la imagen del botón submit de un formulario.
¿Eso es posible?

Tienes razón a ver si este te sirve http://www.pagetutor.com/button_designer/index.html

Igual directamente no esta la solución pero adaptando los ejemplos...

Quim

[Wuanchi]

No me ha servido de mucho, pero gracias Quim.

De todas formas ya he conseguido un código que funciona perfectamente gracias a un compañero de carrera que es un crack, Gimenete.
Aquí os pongo el código.

<form action="laAccionQueSea" method="POST">
<input type="image" id="boton" src="image1.jpg" onmouseover="sobre()" onmouseout="fuera()" />
</form>

<script language="javascript">
function sobre(){
document.getElementById("boton").src="image2.jpg";
}
function fuera(){
document.getElementById("boton").src="image3.jpg";
}
</script>

Espero que les funcione.

Gracias a todos los que me echaron una mano y sobretodo a Gimenete.

Saludos.

[jonathan_miguel]

Iniciado por Wuanchi

No me ha servido de mucho, pero gracias Quim.

De todas formas ya he conseguido un código que funciona perfectamente gracias a un compañero de carrera que es un crack, Gimenete.
Aquí os pongo el código.

<form action="laAccionQueSea" method="POST">
<input type="image" id="boton" src="image1.jpg" onmouseover="sobre()" onmouseout="fuera()" />
</form>

<script language="javascript">
function sobre(){
document.getElementById("boton").src="image2.jpg";
}
function fuera(){
document.getElementById("boton").src="image3.jpg";
}
</script>

Espero que les funcione.

Gracias a todos los que me echaron una mano y sobretodo a Gimenete.

Saludos.

Pero en este código al pulsar el botón no se envia el formulario, echale un vistazo a este:

Código HTML:

<input type="image" id="boton" src="image1.jpg">
<script type="text/javascript">
var mybutton = document.getElementById("boton");
//Eventos
mybutton.onmouseover = function(){
this.src = "image2.jpg";
}
mybutton.onmouseout = function(){
this.src="image3.jpg";
}
mybutton.onclick = function(){
document.getElementsByTagName("form")[0].submit();
}
</script> 

Espero sea de utilidad

----------------------------
www.JoMiCo.com.ar
----------------------------

[caricatos]

Iniciado por Wuanchi

Con este código, no sólo no cambia de imagen, sino que además no envía el formulario :).
De todos modos... gracias.

Sin duda lo has probado mal, porque de formularios aprendí un poco... y simplemente se envían con botones del tipo submit o entradas (input) del tipo imagen (o submit, pero ya lo mencioné) o forzando el envío mediante el método submit, y mi propuesta simplemente era la primera...

Si me muestras un código que no envíe el formulario y no haga rollover con esas líneas, házmelo saber...

Por cierto, lo de usar un input del tipo imagen no es el mejor, porque se envían también datos que no se procesarán... las coordenadas x,y donde se pincha en la imagen.

Saludos

[Wuanchi]

Iniciado por caricatos

Sin duda lo has probado mal, porque de formularios aprendí un poco... y simplemente se envían con botones del tipo submit o entradas (input) del tipo imagen (o submit, pero ya lo mencioné) o forzando el envío mediante el método submit, y mi propuesta simplemente era la primera...

Si me muestras un código que no envíe el formulario y no haga rollover con esas líneas, házmelo saber...

Por cierto, lo de usar un input del tipo imagen no es el mejor, porque se envían también datos que no se procesarán... las coordenadas x,y donde se pincha en la imagen.

Saludos

Lo he vuelto a probar y no funciona lo del rollover (aunque ahora sí envía el formulario) en Mozilla firefox.
Luego lo he probado en el Explorer y ahí sí funciona todo, pero es que yo estoy utilizando Mozilla y la otra vez lo probé solo ahí.

Iniciado por jonathan_miguel

Pero en este código al pulsar el botón no se envia el formulario

A mí sí me envía el formulario y cambia la imagen del botón.

Gracias a los dos por atenderme.
Un saludo.

[caricatos]

Iniciado por Wuanchi

Lo he vuelto a probar y no funciona lo del rollover (aunque ahora sí envía el formulario) en Mozilla firefox.
Luego lo he probado en el Explorer y ahí sí funciona todo, pero es que yo estoy utilizando Mozilla y la otra vez lo probé solo ahí.
...

Bueno, si haz solucionado el problema está muyu bien, pero te puedo asegurar que el código es el más básico que puedas encontrar y funciona en todos, todos los navegadores con javascript básico...

Las únicas condiciones es que las imágenes existan, y que el botón sea del tipo submit... debes considerar que en explorer los botones por defecto son del tipo button (a pesar de que en la w3.org se define como submit, y es como funciona en el resto de navegadores)

También puede suceder que las imagenes tarden un poco en cargarse dependiendo de su peso, y para eso tengo un código más complejo:

<button type="submit" ><img src="imagen1.gif"
onmouseover="this.style.display = 'none'; this.nextSibling.style.display = 'inline'"
/><img src="imagen2.gif" style="display: none"
onmouseout="this.style.display = 'none'; this.previousSibling.style.display = 'inline'" /></button>

También se podrían precargar las imágenes, pero no siempre es una solución efectiva... por cierto, para que el código funcione bien en todos los navegadores no debe haber nada entre las 2 imágenes (ni espacios en blanco)

Saludos