Iluminar una Tabla en JavaScript

Seguro que en más de un sitio habrás visto como se iluminan las celdas de una tabla según pasas el ratón por encima (p.j. en el menú de la página inicial de esta web). De esta forma, el menú, por ejemplo, queda un poco más profesional y te ahorras el hacer varias imágenes para cada botón.

El código es el siguiente:

<html>
<head>
<title>Efecto1</title>

//-->
</script>

</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="20%">
<tr>
<td width="711" bgcolor="#666666" onmouseover="sobre (this,'#999999');" onmouseout="fuera (this,'#666666');" align="center"><font face="Arial" color="#FFFFFF"><b>Ejemplo</b></font></td>
</tr>
</table>

</body>
</html>

Para aplicar este efecto a otras celdas solo tienes que añadirle: onmouseover=" sobre (this,'#999999');" onmouseout=" fuera (this,'#666666');" junto a los parámetros de width o bgcolor de la celda.

Para que puedas adaptar el ejemplo a tus necesidades tienes que modificar el texto escrito en verde . En primer lugar tienes que cambiar el color de fondo de la tabla, luego el color al que quieres que cambie al pasar el ratón por encima y por último el color que quieras que se quede al quitar el ratón (generalmente el mismo que el color de fondo de la tabla).

Original de fuikas.tk

Usuarios que han visto este tema también han visto...

- Abrir ventana centrada en pantalla con Javascript
- Cambio de Imagen en JavaScript
- Desactivar Botón Derecho con JavaScript
- Abrir una ventana cuando otra es cerrada con Javascript
- Recarga de página controlada con JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento