Se nos baseamos no que foi estudado até agora, podemos usar a tabela-botão que havíamos construído, introduzindo em sua célula central um texto, ao invés de um botão padrão com estilos. O problema a partir daqui será dobrado:
1. Capturar o evento CLICK na tabela, de tal forma que quando o usuário clique sobre qualquer parte dela o formulário seja enviado.
2. Capturar o evento da tecla Enter, para que se mantenha a funcionalidade típica dos botões.
Este segundo problema foi resolvido anteriormente, e quanto ao primeiro, basta aproveitar que o Internet Explorer e Netscape 6x suportam os eventos no elemento table. E como Netscape 4x não os suporta, incluímos em texto de botão dentro de um link, para que o resultado final seja de certa forma compatível com todos os navegadores. O código final necessário será do tipo:
|
<html> <head> <title>HTMLWeb. WebScript. Design. Botões com estilo.</title> <style type="text/css"> .link,.link:hover{font-size:10px;font-family:Verdana,Helvetica;font-weight:bold;color:white;text-decoration:none;cursor:default;} .tabelaBotao{cursor:default;} </style> <script language="JavaScript" type="text/javascript"> var contador=false; /** * funcion demo do evento onclick na tabela */ function envia() { if(contador==false) document.forms[0].submit(); } function envia2() { document.forms[0].submit(); setTimeout("contador=false",500); } /** * funcao de captura de clique de tecla em 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.com" target="_blank" method="post"> <input type="text" name="prova"> </form> </div> <table class="tabelaBotao" 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="link">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> |
Cujo resultado é o seguinte:
 |
 |
 |
| enviar | ||
|
Notem como foi estabelecida duas funções diferentes, envia() e envia2(), uma chamada desde o link e outra desde o evento onclick da tabela, e uma variável booleana, contador. O objetivo é que ao clicar sobre "enviar" não se enviem duas vezes os dados do formulário (já que o texto está dentro do link e dentro da tabela).
A grande vantagem que apresenta este botão fictício é que é "quase" compatível com todos os navegadores, é totalmente configurável por nós mesmos e suporta acesso ao texto que deve aparecer no botão, com o que é ideal para aplicações multi-linguagem, nas quais o texto deve depender do idioma escolhido pelo usuário.
Conclusão
Como vocês podem ver, usando a imaginação e as ferramentas simples que dispomos, é fácil converter elementos "insossos" de nossas páginas em partes importantes do design das mesmas. Sempre existe alguma solução às nossas necessidades de desenho, e para encontra-la basta liberar nossa mente e deixar nossas idéias fluírem.
