DesarrolloWeb.com > Manuales > Taller de Javascript

Como iluminar tablas, celdas o filas

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (6)

Curioso efecto conseguido con javascript, que nos permite jugar con la transparencia de cualquier imagen.

Por Fabio Núñez

Publicado: 07/4/03

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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>