Menu Rollover usando tabelas

[_Vinny_]

Menu Rollover usando tabelas

Um menu Rollover é aquele que quando o ponteiro do mouse passa encima do link a cor do fundo, pode ser imagem ou cor, muda. Nesse tutorial trabalharemos com cores, pra ficar uma coisa simples e rápida. Vamos começar, nosso menu será vertical e terá cinco itens(links).

Então, mãos ao trabalho, crie uma tabela com cinco linhas e uma coluna e insira os itens(links). Vou usar os seguintes: Inicio, Empresa, Serviços, Contato e Links. Nosso código fonte está da seguinte forma:

<table width="100%" border="0">
  <tr>
    <td>Inicio</td>
  </tr>
  <tr>
    <td>Empresa</td>
  </tr>
  <tr>
    <td>Serviços</td>
  </tr>
  <tr>
    <td>Contato</td>
  </tr>
  <tr>
    <td>Links</td>
  </tr>
</table>

Aparti de agora, formate os links como preferir e é agora que começa a mágica, antes de cada links, pelo código fonte, tem a tag <td>, de um clique depois do “d”, antes do > e de um espaço e depois insira o seguinte código:

onMouseOver="this.style.backgroundColor='#000000';" onMouseOut="this.style.backgroundColor='#FFFFFF';"

Explicando o código: onMouseOver="this.style.backgroundColor='#000000' Ao passar o ponteiro do mouse encima da linha, esta linha muda pra cor preta ------------------------------------------------------------------------------------------------------------------- onMouseOut="this.style.backgroundColor='#FFFFFF' Quando o ponteiro do mouse sai de cima da linha, a cor desta linha fica branca. Pegando nosso código fonte agora, ele estará assim:

<table width="100%" border="0">
  <tr>
    <td onMouseOver="this.style.backgroundColor='#000000';" onMouseOut="this.style.backgroundColor='#FFFFFF';"><a href="#">Inicio</a></td>
  </tr>
  <tr>
    <td onMouseOver="this.style.backgroundColor='#000000';" onMouseOut="this.style.backgroundColor='#FFFFFF';"><a href="#">Empresa</a></td>
  </tr>
  <tr>
    <td onMouseOver="this.style.backgroundColor='#000000';" onMouseOut="this.style.backgroundColor='#FFFFFF';"><a href="#">Serviços</a></td>
  </tr>
  <tr>
    <td onMouseOver="this.style.backgroundColor='#000000';" onMouseOut="this.style.backgroundColor='#FFFFFF';"><a href="#">Contato</a></td>
  </tr>
  <tr>
    <td onMouseOver="this.style.backgroundColor='#000000';" onMouseOut="this.style.backgroundColor='#FFFFFF';"><a href="#">Links</a></td>
  </tr>
</table>

OBS: aconselho a colocar a cor do onMouseOut, a mesma cor do fundo da tabela.

Editado Maio 6, 2010 por _Vinny_