 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Botones e imágenes
Como podemos mejorar los botones con el uso de imágenes en lugar de botones de submit corrientes.
09/9/02 -
En multitud de ocasiones tenemos que construir páginas web en las que la
forma general de los elementos de la misma no es rectángular, por lo que la
inclusión de botones de formulario estándares romperían este diseño, al
introducir elementos rectángulares en la composición.
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. |
+ 1 categoria relacionada
+ 1 comentario no revisado
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Luciano Moreno*
Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario. URL: http://www.htmlweb.net/ Atención: Contenido exclusivo de DesarrolloWeb.com y HTMLWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||
Tienda DesarrolloWeb
