Introdução ao DHTML

Em nosso artigo anterior (Introdução ao DHTML - Parte I), eu mostrei como alterar dinamicamente a formatação de um bloco de texto usando JavaScript. Hoje vamos ver como mudar a formatação de outros objetos do HTML e como criar um link usando JavaScritp.

Neste exemplo vamos criar uma tabela, com algumas células, e vamos utilizar Javascript para transformar essas células em botões, com animação de foco, de clique e com link. Tudo isso usando apenas o interceptador de eventos do HTML.Vamos por a mão na massa: abra seu editor de HTML (o bloco de notas serve) e digite o código abaixo:

<html>
<body>
<center>
<table width="480" border="0" cellspacing="2" cellpadding="5">
  <tr>
   <td width="120" align="center"><div style="font-size: 12px; font-weight: bold;">A Empresa</div></td>
   <td width="120" align="center"><div style="font-size: 12px; font-weight: bold;">Nossos Produtos</div></td>
   <td width="120" align="center"><div style="font-size: 12px; font-weight: bold;">Nossos Serviços</div></td>
   <td width="120" align="center"><div style="font-size: 12px; font-weight: bold;">Contato</div></td>
  </tr>
</table>
</center>
</body>
</html>

Mas usando o div posso concentrar toda a formatação em um unico objeto, assim fica mais facil programar e dar manutenção. Quando começarmos a falar sobre CSS, vou explicar cada atributo da subclasse style, e quais objetos podem ser formatados usando ela. Por hora, vou explicar os usados acima: font-size define o tamanho da fonte em pixels(px) ou pontos(pt); font-weight define o peso da fonte, pode ter os valores bold (negrito), bolder (negrito forte) ou lighter (negrito claro). Mas nosso estudo hoje não vai se concentrar no objeto div, e sim na célula da tabela (<td>).

bgcolor define a cor de fundo da célula (diferente do restante da tabela) e style.border define as configurações da borda da celula. O primeiro valor passado (thin) define a largura da borda, o segundo (outset) define o estilo e o terceiro (#E1F7E9) define a cor da borda (ou sua variante, se o estilo definir algum tipo de relevo). Veja a tabela abaixo:

Atributo	Valor	Descrição
Largura (o primeiro valor na definição de style.border)	thin	fino
	medium	médio
	thick	espesso
	valor	pode-se especificar um valor numérico, sucedido de px (pixels) ou pt (pontos)
Estilo (o segundo valor na definição de style.border)	none	não há borda, independe de Largura ou Cor
	dotted	pontilhado
	dashed	tracejado
	solid	solido
	double	duas linhas (duplo)
	groove	entalhe (3D)
	ridge	ranhura (3D)
	inset	baixo-relevo (3D)
	outset	auto-relevo (3D)
Cor (o ultimo valor da definição de styel.border)	valor	qualquer valor hexadecimal que configura uma cor aceita para paginas html

Abaixo, como deve ficar a tabela agora (se você usa o Dreamweaver, vai precisar salvar a pagina e carregar no navegador para ver as bordas):

Ótimo, até aqui, nossas células ja parecem botões, mas ainda falta as animações. Vamos lá:

No exemplo anterior (Introdução ao DHTML - Parte I) já vimos dois eventos relacionados ao mouse. Agora vamos ver outros dois. A tabela abaixo traz uma pequena descrição dos eventos ja vistos e dos que veremos aqui.

Evento	Descrição
onMouseOver	Disparado quando o mouse é detectado sobre o objeto.
onMouseOut	Disparado quando é detectado o movimento do mouse, que estava sobre o objeto, para sobre outro objeto, externo ou não ao primeiro.
onMouseDown	Disparado quando é detectado o pressionar de um dos botões do mouse com o ponteiro sobre o objeto.
onMouseUp	Disparado quando é detectado o soltar de um dos botões do mouse com o ponteiro sobre o objeto, independente de o pressionar do botão ter se realizado sobre o mesmo objeto ou não.

Os dois primeiros eventos, como já vimos no artigo anterior, serão usados para detectar quando o mouse passa por cima do botão.O onMouseDown é o evento que vamos utilizar para detectar quando o botão deve ser apertado e o onMouseUp vamos usar para detectar quando o botão deve ser solto.

Para avisar o usuário que a área que o mouse está em cima é clicável, usamos um recurso chamado foco. Foco é a mudança de uma caracteristica de forma bem clara, para que o usuário saiba que aquele objeto não é apenas um adorno gráfico, mas sim uma área útil, e que acontecerá algo se ele clicar lá. Um exemplo são os links, que em alguns navegadores são sublinhados quando o mouse passa por cima deles.

No nosso exemplo, vamos alterar a cor de fundo da célula para que o usuário saiba que o objeto está em foco. A cor da célula é #E1F7E9. Vamos substitui-la pela cor #D1F7D9, que é um tom diferente de verde. Programando a mudança de cor no evento onMouseOver e retornando a cor original em onMouseOut, ficamos com o seguinte código:

Este codigo deve ser incluído em cada declaração de célula (<td>) da tabela. A tabela deve ficar assim:

Como nosso objetivo é criar botões, vamos fazer eles darem a impressão de serem apertados e soltos quando o botão do mouse é apertado e solto. Para tanto, vamos alterar o Estilo da borda das células de outset (alto-relevo) para inset (baixo-relevo). No evento onMouseDown vamos alterar as configurações de style.border para que o estilo seja setado como inset. E no evento onMouseUp vamos alterar novamente as configurações da borda para o estilo original (outset).

Quando passei a definição da propriedade style.border (no inicio do artigo) mostrei que o valor dessa propriedade é composta por tres parametros. Pois bem, mesmo em javascript temos que informar os tres para alterar um deles. Assim, o codigo para apertar e soltar o botão quando o mouse for clicado fica como abaixo:

onMouseDown="this.style.border='thin inset #E1F7E9';" onMouseUp="this.style.border='thin outset #E1F7E9';"

Este codigo deve ser incluído em cada declaração de célula (<td>) da tabela. A tabela deve ficar assim:

Se você clicar sobre um desses botões, segurar o ponteiro do mouse apertado, e arrastar para fora do botão, e soltar fora do botão, verá que o botão permanece apertado, mesmo quando o botão do mouse é solto. Isso ocorre porque o evento onMouseUp não foi detectado (pois o mouse não estava sobre o objeto quando o botão foi solto). Para contornar esse problema, vamos incluir a mesma instrução do evento onMouseUp no evento onMouseOut. Assim, quando o mouse for retirado de cima do botão, se este estiver apertado, será solto. O Código do evento onMouseOut deve ficar assim:

Se você simplesmente definir um link no texto do botão, esse link não funcionará se o botão for clicado sem o ponteiro do mouse estar sobre o texto. Se você tentar definir o link na célula, é possível que em alguns navegadores funcione, mas não é uma pratica aconselhável. Para que uma outra página seja carregada ao clicar um botão desses não vamos criar um link (<a>), vamos sim usar o Javascript.

O parametro location do objeto window guarda a url da pagina em exibição. Para o navegador ir para outra pagina, basta alterar o valor deste parâmetro para a url que desejamos exibir. Vamos programar para que, depois de clicar o botão (apertar e soltar) ele abra uma nova pagina, na mesma janela. O código será o seguinte (no exemplo vou abrir a home page do macoratti):

Essa instrução deve ser colocada no evento onMouseUp, depois da instrução que já está lá, para que só seja executada quando o botão for solto, e depois da animação que restaura a borda dele. Assim dará o efeito de que apertar o botão chama o link. Em um pagina na web, que demora alguns segundos para ser descarregada no navegador, é importante que o estado original do botão (borda em alto-relevo) seja restaurado ao soltar, e depois a pagina é carregada. Assim, o código torna-se o seguinte:

onMouseUp="this.style.border='thin outset #E1F7E9';location='http://www.macoratti.net';"

Lembrando sempre que se mais de uma instrução for colocada na mesma linha, o ponto-e-virgula deve ser usado para separá-las, independente de haver espaços entre elas ou não. Abaixo, temos um botão criado como os da barra acima, que redireciona esta pagina para a home page do macoratti.

Lembrando ainda que usei o http:// para indicar que se trata de um endereço absoluto na web. Você pode indicar um endereço relativo na sua Web, como por exemplo: location='loja/compar.asp'. Tambem pode-se passar parametros para o servidor nessa instrução, assim: location='loja/comprar.asp?prod=1205'.

Para usar o exemplo acima em uma pagina com frames, é necessário especificar em qual frame deseja abrir a pagina. Cada frame possui seu próprio atributo location.

Assim, se o seu botão estiver em uma pagina em um frame, e você deseja abrir em outro, é necessário usar o seguinte código: parent.nomeFrame.location='endereco'. O objeto parent deve ser colocado sempre que os botões tambem estiverem em uma pagina dentro de um frame e deseja-se abrir em outro. Para abrir no mesmo frame, basta apenas location='endereco'.

Se os botões estiverem um nível acima do frame, ou seja, na pagina que define o <frame>, basta então referenciar o nome do frame, assim: nomeFrame.location='endereco'. Observe o codigo abaixo:

<center>
<table width="500" border="0" cellspacing="5" cellpadding="5">
  <tr>
   <td align="center">
    <table width="120" border="0" cellspacing="0" cellpadding="5">
     <tr>
      <td width="120" align="center" bgcolor="#E1F7E9" style="border: thin outset #E1F7E9;" onMouseOver="this.bgColor='#D1F7D9'" onMouseOut="this.bgColor='#E1F7E9';this.style.border='thin outset #E1F7E9'" onMouseDown="this.style.border='thin inset #E1F7E9';" onMouseUp="this.style.border='thin outset #E1F7E9';frmTeste.location='http://www.macoratti.net'">
       <div style="font-size: 12px; font-weight: bold;">Macoratti</div>
      </td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <iframe frameborder="1" height="280" width="480" name="frmTeste"></iframe>
   </td>
  </tr>
</table>
</center>

Espero que este segundo artigo tenha ajudado a clarear mais as nossas idéias sobre o que da pra fazer combinando HTML e JavaScript. No próximo artigo vou mostrar como ocultar e exibir partes da página, e como alterar trechos de texto sem recarregar a pagina.