La Web Buscar   
Manuales: 558
Inicio
Contactar
Enviar Manual
Recomiéndanos
Añadir a Favoritos
Bases de Datos
Diseño
Educación
Hacking
Hardware
Internet
Juegos
Ofimática
P2P y Descargas
Programación
Redes y Servidores
Sistemas Operativos
Varios
Video y Audio
LaFilaCero
LaChabola
Noticias-ES
TodoCVCD
DivxTotal
MoviesDVDR
GamesTorrents
Tu web Aquí



 
    Nombre del Tutorial

Como iluminar tablas, celdas o filas con javascript
    Categoria Index / Programación / Javascript
     Visitas 761
     Valoracion
     Fecha 20-03-2007
     Descripción Curioso efecto conseguido con javascript, que nos permite jugar con la transparencia de cualquier imagen
Como iluminar tablas, celdas o filas con javascript


Paso 1: poner este script en el head <head> xxx </head>

<script>
function uno(src,color_entrada) {
    src.bgColor=color_entrada;src.style.cursor="hand";
}
function dos(src,color_default) {
    src.bgColor=color_default;src.style.cursor="default";
}
</script>

Paso 2: Si lo que quieres es que se ilumine una celda observa el siguiente 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="uno(this,'cccccc');" onMouseOut="dos(this,'FFFFFF');" align="center" width="100" valign="middle"><font face="Arial, Helvetica, sans-serif" size="1">
PASA POR ENCIMA</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>

 

PASA POR ENCIMA    
     
     


Paso 3: Si lo que quieres es que se ilumine una fila observa el siguiente 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="uno(this,'cccccc');" onMouseOut="dos(this,'FFFFFF');" bgcolor="#FFFFFF">
<td align="center" width="108" valign="middle" height="17">
<font face="Arial, Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></td>
<td width="114" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="99" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</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>

PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
     
     


Paso 3: Si lo que quieres es que se ilumine una tabla completa observa el siguiente 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="uno(this,'cccccc');" onMouseOut="dos(this,'FFFFFF');" bgcolor="#FFFFFF">
<tr>
<td align="center" width="108" valign="middle" height="17">
<font face="Arial, Helvetica,sans-serif" size="1">PASA POR ENCIMA</font></td>
<td width="114" height="17">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="99" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
</tr>
<tr>
<td width="108">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
</tr>
<tr>
<td width="108">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>

 

PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA


Paso 3: Si lo que quieres es que se iluminen los bordes de una tabla observa el siguiente código:

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" align="center" width="317">
<tr>
<td>
<table onMouseOver="uno(this,'000000');" onMouseOut="dos(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">PASA POR ENCIMA</font></td>
<td width="114" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="99" height="17">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="108">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="108">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="114">
<div align="center"><font face="Arial, Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
<td width="99">
<div align="center"><font face="Arial,Helvetica, sans-serif" size="1">PASA POR ENCIMA</font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>

 

PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA
PASA POR ENCIMA




 
 

Ir arriba

MundoManuales.CoM © 2005
Haznos tu pagina de inicio Envianos un Email Enviar tutorial