Botones, tablas y eventos

09 de septiembre de 2002

Ampliamos el ejemplo anterior para que el texto de los botones se pueda editar fácilmente, sin perder en presentación.

Para resolver el problema del multi-idioma lo ideal sería contar con un botón tal que el texto que aparece en él sea accesible mediante variables de servidor, es decir, que tengamos una estructura de botón fija, pero que su contenido podamos configurarlo según nuestras necesidades.

Si nos basamos en lo estudiado hasta ahora, podemos usar la tabla-botón que habíamos construido, introduciendo en su celda central un texto, en lugar de un botón estándar con estilos. El problema a partir de aquí será doble:

1. Capturar el evento CLICK en la tabla, de tal forma que cuando el usuario pinche sobre cualquier parte de ella el formulario sea enviado.

2. Capturar el evento de la tecla Enter, para que se mantenga la funcionalidad típica de los botones.

Este segundo problema lo hemos resuelto anteriormente, y en cuanto al primero, basta con aprovechar que Internet Explorer y Netscape 6x soportan los eventos en el elemento table. Y como Netscape 4x no los soporta, incluimos en texto de botón dentro de un enlace, para que el resultado final sea en cierta forma compatible con todos los navegadores. El código final necesario será del tipo:

<html>
<head>
<title>HTMLWeb. WebScript. Diseño. Botones con estilo.</title>
<style type="text/css">
    .enlace,.enlace:hover{font-size:10px;font-family:Verdana,Helvetica;font-weight:bold;color:white;text-decoration:none;cursor:default;}
    .tablaBoton{cursor:default;}
</style>
<script language="JavaScript" type="text/javascript">
    var contador=false;
    /**
    * funcion demo del evento onclick en la tabla
    */
    function envia()
    {
      if(contador==false)
          document.forms[0].submit();
    }
    function envia2()
    {
      document.forms[0].submit();
      setTimeout("contador=false",500);
    }
    /**
    * funcion de captura de pulsación de tecla en Internet Explorer
    */
    var tecla;
    function capturaTecla(e)
    {
        if(document.all)
            tecla=event.keyCode;
        else
        {
            tecla=e.which;
        }
     if(tecla==13)
        {
            document.forms[0].submit();
        }
    }
    document.onkeydown = capturaTecla;
</script>
</head>
<body>
<div align="center">
<form name="form1" action="http://www.yahoo.es" target="_blank" method="post">
    <input type="text" name="prueba">
</form>
</div>
<table class="tablaBoton" cellpadding="0" cellspacing="0" border="0" align="center" onclick="envia()">
<tr>
    <td rowspan="3" width="5" height="19"><img src="images/curva_azul_izq.gif" width="5" height="19" border="0" alt=""></td>
    <td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td>
    <td rowspan="3" align="right" width="5" height="19"><img src="images/curva_azul_der.gif" width="5" height="19" border="0" alt=""></td>
</tr>
<tr align="center">
    <td height= "17" bgcolor="#638cb5"><a href= "#"onclick="contador=true;envia2();return false" class="enlace">enviar</a></td>
</tr>
<tr>
    <td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td>
</tr>
</table>
</body>
</html>

Cuyo resultado es el siguiente:


	enviar

Notad cómo hemos establecido dos funciones diferentes, envia() y envia2(), una llamada desde el enlace y otra desde el evento onclick de la tabla, y una variable booleana, contador. El objeto es que al pulsar sobre "enviar" no se envién dos veces los datos del formulario (ya que el texto está dentro del enlace y dentro de la tabla).

La gran ventaja que presenta este botón ficticio es que es "casi" compatible con todos los navegadores, es totalmente configurable por nosotros y soporta acceso al texto que debe aparecer en el botón, con lo que es ideal para aplicaciones multi-lenguaje, en las que el texto debe depender del idioma elegido por el usuario.

Conclusión

Como véis, usando la imaginación y las herramientas simples de que disponemos, es fácil convertir elementos "sosos" de nuestras páginas en partes importantes del diseño de las mismas. Siempre existe alguna solución a nuetras necesidades de diseño, y para encontrarla basta con liberar nuestra mente y dejar que nuestras ideas fluyan.

Descargar los códigos e imágenes

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabill...

Manual

Botones con estilo

Botones, imágenes y eventos