Imagen roll over para envío de formularios

El código HTML nos permite sustituir el típico botón de formulario por una imagen con sólo cambiar el valor del atributo type de la etiqueta input (type="submit" por type="image"), pero no es posible crear un roll over o imagen de sustitución a través del código html para el envío de formularios, como tampoco lo es posible para la creación del roll over convencional.

<SCRIPT language="Javascript">
function enviar() {
document.formulario.submit();
}
</SCRIPT>

Pues bien, la solución, es bien sencilla y compatible entre los navegadores IE y Netscape. Hay que añadir dentro del HEAD la definición de la función enviar(). Dicha función es la que se encargará de enviar el formulario llamado "formulario".

Ahora creamos roll over clásico en JavaScript e insertado dentro de la etiqueta FORM de la forma:

<form name="formulario" method="get">
   <a href= "javascript:enviar()"
         onmouseOver="document.enviar.src='enviar2.gif';"    
         onmouseOut="document.enviar.src='enviar1.gif';">
   <img name="enviar" src="enviar1.gif"border="0">
</a>
</form>
Ejemplo:

Es importante recordar que el nombre del formulario HTML sea el mismo al que viene definido en la función enviar() del HEAD. Como se ve en el código, la llamada a la función se hace a través del vínculo, por lo que a partir de cualquier roll over funcionará correctamente.

Leave A Comment?