Botones e  imágenes.-

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 fecha 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. Pero el resultado final es bastante aceptable.

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.