image
Inicio » Javascript » Artículos » Imagen roll over para envío de formularios




Imagen roll over para envío de formularios

 
Por Miguel Cruz
Artículos publicados: 3
Valoración media: 3.79/5
Usuario desde: 22/12/2002

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.


Bio:
Miguel Cruz Martínez es desarrollador web de aplicaciones avanzadas tales como e-comerce, contenidos dinámicos, bases de datos y tecnología wap. Trabaja desde 2000 en signo-net, empresa de creación propia (www.signo-net.com) dedicada a las nuevas tecnologías y ubicada en Sevilla (España).

Otros artículos recientes de este autor:
Fecha publicación: 25/01/2003


Más artículos

Valoración

Este artículo ha sido valorado 609 veces. Valor:  [3.52/5]   
Malo------>Normal----->Bueno
                   

Comentarios

Añadir un comentario

Si no está de acuerdo con algo o quiere añadir más información al respecto puede incluirla añadiendo un comentario.

Nombre:
E-Mail: (opcional)
Los comentarios son moderados, no aparecen inmediatamente, son leídos por el administrador y publicados según el interés para otros lectores.

Se reserva el derecho de publicación de los comentarios introducidos.

Colabora

¿Te sientes capacitado para escribir un artículo como este? ¿Te gustaría colaborar escribiendo artículos en WebEstilo? Háznoslo saber !!









Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.