Botões e imagens

Como podemos melhorar os botões com o uso de imagens ao invés dos botões de submit correntes.

Por Luciano Moreno


Publicado em: 25/7/06
Valorize este artigo:
Em muitas ocasiões temos que construir páginas web nas que a forma geral dos elementos da mesma não é retangular, fazendo com que a inclusão de botões de formulário padrão rompam este design, ao introduzir elementos retangulares na composição.

Neste caso, podemos recorrer à simulação de botões mediante imagens, com o qual a liberdade do design será completa, podendo construir botões ovais, circulares, triangulares, etc. Suponhamos que construímos a seguinte imagem gif:

enviar

Só nos resta agora lhe dar vida mediante código JavaScript, o que se consegue de forma fácil, incluindo a imagem dentro de um link que chame ao método submit do objeto form, com o qual acessamos ao formulário.

O código necessário é do tipo:

<style type="text/css">
  .link{cursor:default;}
</style>
<div align="center">
  <form name="form1" action=" http://br.yahoo.com/" target="_blank" method="post">
    <input type="text" name="prova"><br><br>
    <a class="link" href="#" onclick="document.forms.form1.submit();return false">
      <img src="images/botao.gif" width="85" height="24" border="0" alt="enviar">
    </a>
  </form>
</div>

Cujo resultado é o seguinte:



enviar

Obtemos assim um botão com os lados arredondados, e que é compatível com todos os navegadores, ao ser na verdade uma imagem. Adicionamos uma classe de estilo (.link) para que ao situar o cursor sobre o botão não apareça a mão típica dos links, e sim, a seta característica dos botões; a desvantagem é este último só funciona no Internet Explorer e no Netscape 6x, enquanto que no Netscape 4x continuará aparecendo a mãozinha.

A principal diferença entre usar uma imagem e usar um botão padrão é que no caso da imagem perdemos a funcionalidade de foco dos botões, ou seja, que se agora situarmos o cursor na caixa de texto e clicarmos a tecla Enter, os dados do formulário não serão enviados. Veremos como podemos consertar isto.

Nota: Em alguns navegadores, por exemplo Internet Explorer 6, não chega a perde a funcionalidade do envio do formulário com o clique da tecla Enter.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato