Como podemos mejorar los botones con el uso de imágenes en lugar de botones de submit corrientes.
En estos casos podemos recurrir a la simulación de botones mediante imágenes, con lo que la libertad de diseño es completa, pudiendo construir botones ovalados, circulares, triángulares, etc. Supongamos que hemos construido la siguiente imagen gif:
Sólo nos queda ahora darle vida mediante código JavaScript, lo que se consigue de forma fácil, incluyendo la imagen dentro de un enlace que llame al método submit del objeto form, con el que accedemos al formulario.
El código necesario es del tipo:
<style type="text/css"> .enlace{cursor:default;} </style> <div align="center"> <form name="form1" action="http://www.yahoo.es" target="_blank" method="post"> <input type="text" name="prueba"><br><br> <a class="enlace" href="#" onclick="document.forms.form1.submit();return false"> <img src="images/boton.gif" width="85" height="24" border="0" alt="enviar"> </a> </form> </div> |
Cuyo resultado es el siguiente:
Obtenemos así un botón con los lados redondeados, y que resulta compatible con todos los navegadores, al ser en realidad una imagen. Hemos añadido una clase de estilo (.enlace) para que al situar el cursor sobre el botón no aparezca la mano típica de los enlaces, sino la flecha característica de los botones; la pega es que esto último sólo funciona en Internet Explorer y Netscape 6x, mientras que en Netscape 4x seguirá apareciendo la mano.
La principal diferencia entre usar una imagen y usar un botón estándar es en el caso de la imagen hemos perdido la funcionalidad de foco de los botones, es decir, que si ahora situamos el cursor en la caja de texto y pulsamos la tecla Enter, los datos del formulario no se enviarán. Vamos a ver cómo podemos arreglar esto.
Nota: En algunos navegadores, por ejemplo Internet Explorer 6, no se llega a perder la funcionalidad del envío del formulario con la pulsación de la tecla Enter. |
Luciano Moreno
Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...