17 replies to this topic

[Guilherme Blanco]

Podemos começar?!

Bom, muito bom....

Primeiro. DHTML. Eventos, ações, correto?!
Então porque insiste em usar a tag <A>???

Defina um evento ONCLICK="document.location='link.html';"

caso queira melhorar a aparência, crie uma função no head assim:
function goTo(sURL) {
document.location = sURL;
}

aí, o seu ONCLICK ficaria assim:
ONCLICK="goTo('link.html');"

Melhorou?
Bom, já retiramos o nosso problema; o <A>

Agora, para alterar a cor, é só alterar a propriedade COLOR da definição CSS.
Mas, como o seu código está diferente, vamos dar um upgrade no seu código. Eu vou ir explicando os passos, fique tranquilo...

Primeiro, criamos o HTML.
Observe a sua tabela... deve estar algo assim:
<TABLE ...>
<TR>
<TD>Link</TD>
</TR>
</TABLE>

Implementemos o HTML com o código JS que escrevi em cima. Com a adição do evento ONCLICK, ficaria algo assim:
<TABLE ...>
<TR>
<TD ONCLICK="goTo('link.html');">Link</TD>
</TR>
</TABLE>

Bom, agora, defina as classes no CSS.
Como exemplo, vou usar as cores preto e branco, uma para fundo e outra para texto. No evento ONMOUSEOVER, o fundo fica preto e a cor do texto branca, no evento ONMOUSEOUT, o fundo fica branco e o texto preto.

Bom, agora temos 2 opções. Chamamos uma função que faz a alteração pra nós ou então criamos as classes e alteramos as classes no próprio evento, sem precisar de funções JS. Vou explicar esta última, que é mais simples.
Ah, quase ia me esquecendo... as definições CSS:
<STYLE>
.m_over { ... background: black; color: white; }
.m_out { ... background: white; color: black; }
</STYLE>

Agora, nos ateremos exclusivamente à linha:
<TD ONCLICK="goTo('link.html');">Link</TD>

Inicialmente, temos que estabelecer um estado inicial para a célula. Usamos o CLASS="m_out" para que efetue isto para nós. A linha, agora, ficará assim:
<TD CLASS="m_out" ONCLICK="goTo('link.html');">Link</TD>

Falta alternar entre os estados do mouse sobre a célula e o estado de retorno ao m_out quando o mouse não está sobre a célula. Os eventos a serem utilizados, como já disse anteriormente, são: ONMOUSEOVER e ONMOUSEOUT.
Para alterar a classe da célula, usamos este código:this.className='classe';
Sinceramente, odeio programação que se baseia em caso sensitivo, como é o caso do código acima (uso o "N" maiúsculo). Se você deixá-lo minúsculo, a alteração não é feita. Bem, isto foi só um comentário... voltando...
Vamos atribuir a classe m_over no evento ONMOUSEOVER e a classe m_out no ONMOUSEOUT. Os motivos, são óbvios. Se você quer o efeito retorne corretamente, o m_out deve ficar no ONMOUSEOUT, pois assim confere com a classe inicial atribuída. A classe m_over é única que altera o estado inicial, no evento ONMOUSEOVER.
Baseado nisto, seu código deverá ficar algo assim:
<TD CLASS="m_out" ONMOUSEOVER="this.className='m_over';" ONMOUSEOUT="this.className='m_out';" ONCLICK="goTo('link.html');">Link</TD>

Com isto, resolvi seu problema.
Mas, gostaria de ressaltar que, baseado nesta mesma idéia, é possível atribuir um estado (uma classe) no evento ONCLICK também. Assim como no evento de clique-duplo (ONDBLCLICK), entre outros.

Espero ter esclarecido a sua dúvida e ter te ajudado a aprender um pouco mais sobre DHTML (eventos e alteração de classes).
Caso alguma coisa, entre em contato comigo.

Valeu,

[Guilherme Blanco]

Desculpe, só um pequeno update no meu post.

Na função goTo, talvez você queira usar um TARGET em outro frame, por isso eu resolvi esclarecer isto também.

Altere a linha:
document.location = sURL;

Por esta:
document.frames["nome_do_frame_ou_iframe"].location = sURL;

Pronto... Desculpe por ter esquecido isto.

Grato,