Como iluminar tablas, celdas o filas
Curioso efecto conseguido con javascript, que nos permite jugar con la transparencia de cualquier imagen.
07/4/03 - 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>
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
|
|
Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 1 comentario (Añadir)
+ 4 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo |
|
|
Manuales relacionados con este artículo
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en
Scripts en Javascript
Comentarios de los visitantes
|
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
|
| Se muestra un comentario revisado |
Comentario de Alan
01/5/06
seria bueno que en vez de "hand" en el valor del cursor se utilize "pointer" ya que FF no reconoce "hand" como valido.
Saludos
| Comentarios sin revisar |
|
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
|
Se han encontrado 4 comentarios sin revisar
Ir arriba