Como hacer Rollover sobre imagen usada como submit en formulario

[franciscocolinas]

Es mi primera participación en el foro así que antes de nada un saludo a todos.

Tengo una imagen que me sirve de botón submit para el envio de campos hidden en un formulario. El problema es que quiero hacer rollover sobre esa imagen y todo lo que he leido por ahi hace referencia a rollover sobre una url (href) y no sobre una imagen usada como submit. El codigo es el siguiente:

<form id="notas_1" name="notas_1" method="post" action="notas_profesores.php">
<input type="hidden" name="profesor" value="<? print($profesor); ?>">
<input type="hidden" name="clave" value="<? print($clave); ?>">
<input type="image" value="login" name="login" src="images/pestanyas/notas_full.jpg" alt="Notas" width="80" height="20" border="0" >
</form>

Necesito que sea un formulario pues debo propagar los campos hidden a la pagina que procesa el formulario. Para ello en el type image le pongo de valor login y en src la imagen que lo representa. Esto funciona. Pero lo que yo quiero es un mouseover sobre esa imagen para cambiarla, y eso lo he intentado con el siguiente codigo que adjunto sin funcionar.

<SCRIPT LANGUAGE="JavaScript">
var normal=new Image();
var vuelto=new Image();
normal.src="images/pestanyas/notas_full.jpg";
vuelto.src="images/pestanyas/notas.jpg";
function animar(numeroDeImagen) {
document.images[numeroDeImagen].src=vuelto.src;
}
function volver(numeroDeImagen) {
document.images[numeroDeImagen].src=normal.src;
}
</script>

-----------------

<form id="notas_1" name="notas_1" method="post" action="notas_profesores.php">
<input type="hidden" name="profesor" value="<? print($profesor); ?>">
<input type="hidden" name="clave" value="<? print($clave); ?>">
<input type="image" value="login" name="login" onmouseover="animar(0);"
onmouseout="volver(0);" src="images/pestanyas/notas_full.jpg" alt="Notas" width="80" height="20" border="0" >
</form>

Nada de esto me ha funcionado, lo he intentado cambiar de posicion, etc, etc, pero no consigo que la imagen cambie sin utilizar un href.

Muchas gracias por vuestra ayuda.

Francisco Colinas

[SergioGfx]

Nose mucho de esto pero igual puedes acerlo con CSS

[franciscocolinas]

Hola SergioGfx,
he visto lo que hacen con css mediante los estilos pero de igual forma que lo que he visto con javascript lo hacen sobre los enlaces y no sobre un imagen de tipo submit.

[derkenuke]

Lo más sencillo no es que sea utilizar document.images... Eso es una lista de todas las imágenes del documento, y si alguna vez añades una antes, vas a tener que modificar el argumento ese.

Lo más cómodo es utilizar en tus funciones el this, que hace referencia a la imagen que hizo saltar el evento. De esta manera tus funciones quedan así de sencillas:

Código PHP:

  function animar(obj) {
    obj.src=vuelto.src;
}
function volver(obj) {
    obj.src=normal.src;
} 
   

Y para los eventos onmouseover y onmouseout la cosa queda así:

Código PHP:

  onmouseover="animar(this);"
onmouseout="volver(this);" 
   

Con eso ya lo tendríamos (y además podemos reutilizarlo para más imágenes, más útil).



Un saludo.

[franciscocolinas]

Muchas gracias dekernuke, funciona!!!

Aparte de la sencillez ahora si que puedo hacer el rollover sobre cualquier imagen aunque no sea un hipervínculo.

Muchas gracias de nuevo y un saludo!!!