Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Workshop de Javascript
SEÇÕES
Manuais relacionados
+Workshop de Javascript
Categorias
+Javascript

Índice do Manual Workshop de Javascript
+ Efeitos rápidos com Javascript
+ Abertura e configuração de popups com Javascript
+ Acessso por senha Javascript
+ Rollover com Javascript
+ Navegador dinâmico Javascript
+ Navegador desdobrável
+ Navegador desdobrável com frames
+ Texto em movimento na barra de estado
+ Marcar ou desmarcar todos os checkboxes de um formulário com Javascript
+ Desabilitar o menu contextual do navegador com Javascript
+ Relógio em Javascript
+ Scripts diferentes para cada navegador
+ Tamanho dos campos relativo ao navegador
+ Estilos diferentes para cada navegador
+ Tabela de cores com Javascript
+ Sub-menu em outra janela
+ Degradê de cor Javascript
+ Validar inteiro no campo de formulário
+ Exemplos de funcionamento da classe String
+ Exemplo de funcionamento de Date
+ Link aleatório Javascript
+ Geração de números aleatórios Javascript
+ Comprovar se as senhas são iguais
+ Ex. de trabalho com formulários. Calculadora simples
+ Enviar ao navegador a outra página se não tiver Javascript
+ Confirmação de envio de formulário
+ Javascript para se posicionar em um select
+ Inibir um campo texto de formulário com Javascript
+ Camadas com Internet Explorer 5, 6, Netscape 6, 7 e Opera
+ Mostrar e ocultar camadas com IE 5,6 NS 6,7
+ Movimento de Camadas com IE 5,6 NS 6,7
+ Escritura nas Camadas com IE 5, 6, NS 6, 7
+ Como iluminar tabelas, células ou filas
+ Inibir radio button com Javascript
+ Atualizar dois frames com um só link
+ Calcular a idade em Javascript
+ Iluminar formulários com CSS e Javascript
+ Autozoom de texto com Javascript
+ Javascript para evitar que a página se mostre em um frame
+ Elementos de formulário select associados
+ Conta os caracteres escritos em um textarea
+ Passo de parâmetros em HTML com client-side Javascript
+ Moldura dinâmica em Javascript com texto que muda
+ Criação de gráficos de barras com Javascript
+ Jogos em Javascript
+ Cross-Browser. DHTML compatível com todos os navegadores.
+ HTML Area. Editor WYSIWYG
+ Ocultar um e-mail de um link para evitar o spam
+ Função em Javascript para a inserção de datas
+ DHTML Calendar
+ Gerar uma cor aleatória com Javascript
+ A aprendizagem na Internet
+ Menu Dinâmico com Javascript
+ Página que muda aleatoriamente a cor de fundo
+ Script de recarregamento da página com Javascript
+ Mudar a cor às células de uma tabela com Javascript
+ Pop-ups DHTML – OpenPopups
+ Validar a extensão de um arquivo a subir com Javascript
+ Detectar a resolução da tela do usuário com Javascript
+ Esconder a URL de um link na barra de estado
+ Como integrar conteúdo RSS em minha página?
+ Fazer com que um iframe se ajuste à altura de uma janela com Javascript
+ É vantajoso o uso de ParseInt para validar números?
+ Efeito para desabilitar/habilitar o fundo da Página
+ Validar número de checkbox marcados com Javascript
+ Evitar que um textarea supere um número de caracteres permitidos
+ Javascript não intrusivo
+ Controle de introdução de caracteres de um campo de texto com Javascript
+ Listagem de diferentes Framework Javascript
+ Script para detecção de suporte a Ajax, Cookies e ActiveX
+ Leitor RSS com Javascript

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net

Como iluminar tabelas, células ou filas

Curioso efeito conseguido com Javascript, que nos permite jogar com a transparência de qualquer imagem.


Passo 1: Colocar este script no head <head> xxx </head>

<script>
function um(src,cor_entrada) {
    src.bgColor=cor_entrada;src.style.cursor="hand";
}
function dois(src,cor_default) {
    src.bgColor=cor_default;src.style.cursor="default";
}
</script>

Passo 2: Se o que você quer é que se ilumine uma célula observe o seguinte código:

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center">
<tr>
<td>
<table border="0" cellspacing="1"cellpadding="0" align="center" width="278">
<tr bgcolor="#FFFFFF">
<td onMouseOver="um(this,'cccccc');" onMouseOut="dois(this,'FFFFFF');" align="center" width="100" valign="middle"><font face="Arial, Helvetica, sans-serif" size="1">
PASSE POR CIMA</font></td>
<td width="95"> </td>
<td width="83"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="100"> </td>
<td width="95"> </td>
<td width="83"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="100"> </td>
<td width="95"> </td>
<td width="83"> </td>
</tr>
</table>
</td>
</tr>
</table>

PASSE POR CIMA    
     
     

Passo 3: Se o que você quer é que se ilumine uma fila observe o seguinte código:

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#000000" align="center" width="317">
<tr>
<td>
<table border="0" cellspacing="1" cellpadding="0" align="center" width="325">
<tr onMouseOver="um(this,'cccccc');" onMouseOut="dois(this,'FFFFFF');" bgcolor="#FFFFFF">
<td align="center" width="108" valign="middle" height="17">
<font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></td>
<td width="114" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="99" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="108"> </td>
<td width="114"> </td>
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="108"> </td>
<td width="114"> </td>
<td width="99"> </td>
</tr>
</table>
</td>
</tr>
</table>

PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
     
     

Passo 3: Se o que você quer é que se ilumine uma tabela completa observe o seguinte código:

<table border="0" cellspacing="1" cellpadding="0" bgcolor="#000000" align="center" width="317">
<tr>
<td>
<table border="0" cellspacing="1" cellpadding="0" align="center" width="325" height="62" onMouseOver="um(this,'cccccc');" onMouseOut="dois(this,'FFFFFF');" bgcolor="#FFFFFF">
<tr>
<td align="center" width="108" valign="middle" height="17">
<font face="Arial, Helvetica,sans-serif" size="1">PASSE POR CIMA</font></td>
<td width="114" height="17">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="99" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
</tr>
<tr>
<td width="108">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
</tr>
<tr>
<td width="108">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>

PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA

Paso 4: Se o que você quer é que se iluminem as bordas de uma tabela observe o seguinte código:

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" align="center" width="317">
<tr>
<td>
<table onMouseOver="um(this,'000000');" onMouseOut="dois(this,'CCCCCC');" border="0" cellspacing="1" cellpadding="0" align="center" width="325" height="60">
<tr bgcolor="#FFFFFF">
<td align="center" width="108" valign="middle" height="17">
<font face="Arial, Helvetica,sans-serif" size="1">PASSE POR CIMA</font></td>
<td width="114" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="99" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="108">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="108">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASSE POR CIMA</font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>

PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA
PASSE POR CIMA

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Workshop de Javascript
Seguinte: Inibir radio button com Javascript
Anterior: Escritura nas Camadas com IE 5, 6, NS 6, 7
< Índice de Workshop de Javascript

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em Javascript


Comentários dos visitantes
Os comentários dos visitantes são para ampliar a informação do artigo. Todos podem participar.
Acrescentar um comentário do artigo Acrescentar um comentário do artigo



Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites