Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

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>

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

 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

Informe de Fabio Núñez*
Webmaster de Dreamweavering
URL: http://www.dreamweavering.com

Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de Javascript
Siguiente: Inhibir radio button con Javascript
Anterior: Escritura en las Capas con IE 5, 6, NS 6, 7
< Indice de Taller de Javascript

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

Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 4 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de Javascript
Categorías
+Scripts en Javascript

Lectura recomendada
+ DOMINE JAVASCRIPT. 2ª EDICIóN

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia