Links com texto explicativo em uma camada a parte
Realizamos um exemplo DHTML consistente em uma lista de links que mostram uma explicação de seu conteúdo ao passar o mouse por cima.

Em nossa nova linha de artigos sobre DHTML compatível para todos os navegadores, vamos mostrar um código que serviria para criar uma lista de links com descrições de seu conteúdo. Estas descrições estarão em uma camada a parte e se visualizariam ao passar o mouse pelo link correspondente a cada explicação.

Em outras palavras, teremos um conjunto de links que serão auto-explicativos, já que, ao passar o mouse por cima, se mostrará uma camada com um texto que explique o conteúdo que se visualizaria ao clicar o link. Podemos ver o exemplo em funcionamento em uma página a parte.

Nota: Para realizar este exemplo vamos utilizar as bibliotecas do website Cross-Browser (http://www.cross-browser.com), que foram introduzidas anteriormente em um artigo de CriarWeb.com

Explicação do exemplo

Veremos como se realizaria este exemplo. Para começar mostramos o código para fazer a lista de links explicativos.

<a href="#" onmouseover="mostra('e1')" onmouseout="oculta('e1')">Link 1</a>
<br>
<a href="#" onmouseover="mostra('e2')" onmouseout="oculta('e2')">Link 2</a>
<br>
<a href="#" onmouseover="mostra('e3')" onmouseout="oculta('e3')">Link 3</a>
<br>
<a href="#" onmouseover="mostra('e4')" onmouseout="oculta('e4')">Link 4</a>

O detalhe mais destacável está nos manejadores de eventos dos links, que definem ações a realizar para onmouseover e onmouseout, que correspondem com as ações de situar o ponteiro do mouse encima do link ou retira-lo do link, respectivamente.

Agora vamos ver o código HTML para a criação das camadas com as explicações de cada um dos links.

<div id="e1" class=molduras style="position:absolute;left:85px;top:13px;">Explicação do link 1</div>
<div id="e2" class=moldura style="position:absolute;left:85px;top:31px;"> Explicação do link 2</div>
<div id="e3" class=moldura style="position:absolute;left:85px;top:49px;"> Explicação do link 3</div>
<div id="e4" class=moldura style="position:absolute;left:85px;top:67px;"> Explicação do link 4</div>

Devemos observar os identificadores ou nomes que damos às camadas, com o atributo id da linguagem HTML. Também é interessante o atributo style, que serve para definir, em sintaxe CSS, as propriedades da camada. Neste caso, mediante o atributo style, definimos a posição de cada uma das camadas, enquanto que para outros estilos da camada se utiliza a classe (class) "molduras", que está definida na declaração de estilos no cabeçalho da página.

Agora vem a parte mais importante, o código Javascript para mostrar e ocultar as camadas segundo se situa ou retira o mouse dos links. É um código extremamente simples, pois a verdadeira dificuldade do exercício quem realiza é a biblioteca de Cross-Browser, que dispõe de funções para o trabalho com camadas que são compatíveis com todos os navegadores.

<script type='text/javascript' src='../x/x_core.js'></script>
<script type='text/javascript'>
function mostra(camada){
xShow(camada);
}
function oculta(camada){
xHide(camada);
}
</script>

Esperamos que não se assustem com a simplicidade deste exemplo. Como dizíamos, a complexidade principal do exercício fica com a biblioteca para o trabalho com DHML, que se inclui como script externo na primeira linha do código anterior.

Mais tarde, declaram-se as funções mostra() e oculta(), que recebem o identificador da camada a mostrar ou ocultar. Estas funções, o único que fazem é chamar à biblioteca de DHTML compatível, concretamente aos procedimentos para visualizar ou esconder as camadas.

Exemplo com camadas de cores mutáveis

Para complicar um pouco este exemplo e torna-lo mais vistoso, realizamos umas pequenas modificações para que a cor de fundo das camadas explicativas mude durante todo o tempo em que se visualiza a camada, com o qual criaremos um pequeno loop de animação. Podemos ver em uma página a parte o efeito que buscamos .

O exemplo tem certa complicação porque trabalha com cores HTML, cujos valores se compõem com números em base hexadecimal. O trabalho para fazer um loop que mude a cor foi visto em um artigo antigo de CriarWeb.com: Degrade de cor Javascript.

Para realizar este exemplo criamos e modificamos ligeiramente uma função chamada degrade(), que já utilizamos em um artigo antigo de CriarWeb.com. Esta função se chama a si mesma com um atraso, com o qual se realiza um loop infinito de chamadas à função degrade() e portanto, a cor mudará indefinidamente.

Dentro desta função se realiza a mudança de cor para as camadas, para o que se utiliza uma nova função da biblioteca Cross-Browser chamada xBackground(), que recebe o identificador da camada a mudar sua cor de fundo e a cor em hexadecimal a colocar.

A cor de fundo muda para todas as camadas em cada execução da função degrade(). Este é o pedaço de código onde se obtém a nova cor hexadecimal e se atribui como cor de fundo às camadas do exemplo.

cor_mostrar = converteHexadecimal(Math.round(cor_atual[0])) + converteHexadecimal(Math.round(cor_atual[1])) + converteHexadecimal(Math.round(cor_atual[2]))
xBackground('e1',cor_mostrar);
xBackground('e2',cor_mostrar);
xBackground('e3',cor_mostrar);
xBackground('e4',cor_mostrar);

O exemplo que estamos comentando pode-se ver em uma página a parte . Para ver o código completo podemos selecionar a opção de "exibir código fonte" do navegador que estivermos utilizando.