Olá galera, nesta Quick Tips, irei mostra como podemos como podemos criar um efeito bem legal, nas nossas tabelas do HTML. Podemos notar em vários sites que possuem diversas listas, quando passamos o mouse sobre um item desta lista, o mesmo muda a cor, para dar uma idéia de seleção, certamente isso pode ser feito de várias maneiras, como eu particularmente gosto de HTML, até por que minha área não é esta, como vocês sabem, vou fazer então em HTML, este efeito.
Para isso vamos utilizar nosso famoso NotePad, ou para os íntimos o bloco de notas, e nele vamos colar o seguinte código, já todo formatado, salvando o mesmo como Index.HTML
<HTML>
<Title>
Trabalhando com Sombreado
</Title>
<BODY>
<TABLE BORDER="2" CELLPADDING="2" WIDTH="100%">
<TR onMouseover="this.bgColor='#F4A460'"onMouseout="this.bgColor='#FFFFFF'">
<TD>DevMedia</TD>
</TR>
<TR onMouseover="this.bgColor='#F4A460'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Wesley Yamazack</TD>
</TR>
<TR onMouseover="this.bgColor='#F4A460'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Dicas de HTML</TD>
</TR>
<TABLE BORDER="2" CELLPADDING="2" WIDTH="100%">
<TR onMouseover="this.bgColor='#FFE4B5'"onMouseout="this.bgColor='#FFFFFF'">
<TD>DevMedia</TD>
</TR>
<TR onMouseover="this.bgColor='#FFE4B5'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Wesley Yamazack</TD>
</TR>
<TR onMouseover="this.bgColor='#FFE4B5'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Dicas de HTML</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Vejamos que temos 2 tabelas, a primeira com uma determina cor #F4A460 e a segunda com outra cor #FFE4B5 para dar um efeito de grupo ativo, ou inativo, ou parte superior masculino, e parte inferior feminino, em fim, podemos notar que estamos utilizando a Tag onMouseover que recebe uma cor quando o mouse esta sobre ela, e outra cor onMouseout quando o mouse perde o foco, um efeito bem simples e interessante.
Observação o this não é obrigatório apenas para efeito de padrão mesmo eu o mantive.
Fico por aqui ate à próxima Quick Tips.
Um abraço
Wesley Y
wesley@lithic.com.br
