Iluminar Celdas de una tabla HTML

2008-01-18T13:00:00.001+01:00

La cuestión trata de que las celdas de una tabla se "iluminen" cuando situamos el ratón sobre ellas, y se "desiluminen" cuando el ratón salga de las mismas.

Para ello montamos nuestra tabla y le damos nombres a cada TD que pueda ser iluminado. Por ejemplo:

<table>
<tr>
<td name="c1" id="c1">
</td><td name="c2" id="c2">
</td></tr>
</table>

y ahora controlamos sus eventos OnMouseOver y OnMouseOut de la siguiente forma:

<table>
<tr>
<td name="c1" id="c1" onmouseover="javascript:Iluminar(this)" onmouseout="javascript:Apagar(this)">
</td><td name="c2" id="c2" onMouseOver="javascript:Iluminar(this)" OnMouseOut="javascript:Apagar(this)"></td></tr>
</table>

Esto hace que cada vez que pasemos por encima de la celda c1 ó c2 se llame a la función javascript Iluminar() pasándole como parámetro "this" (o sea, la propia celda) y cuando se sale de la misma se llama a Apagar.

Para las funciones Iluminar y Apagar utilizo la propiedad className del objeto, de forma que si he diseñado un estilo CSS similar a:

<style>
.celda
{
background-color:#0000FF;
color: #ffffff;
font-weight:bold;
}
.celda_iluminada
{
background-color:#FF0000;
color:#FFFF00;
font-weight:bold;
}
</style>

Puedo alterar en cualquier momento la clase de estilo de un objeto sin más que hacer lo siguiente con Javascript:

function Iluminar(obj){
obj.className="celda_iluminada";
}

function Apagar(obj){
obj.className="celda";
}

Otra opción sin usar hojas de estilo sería cambiar el color de background de la celda así:

function Iluminar(obj){
obj.style.bgColor="#FF0000";
}

function Apagar(obj){
obj.style.bgColor="#0000FF";
}

Pero aunque esto es correcto, modificar el className me permite cambiar varias propiedades de una sóla vez (no sólo el background sino también el color de fuente y en general todo lo que se pueda incluir en una clase CSS) mientras que haciéndolo por modificaciones sobre style necesito una línea para cada propiedad que quiero cambiar.

Objetivo del Blog

2008-01-18T11:54:00.000+01:00

Este es mi tercer blog, en los enlaces que encontrarás en él podrás acceder a mis otros blogs (PHP desde cero y Trono sin Reina, este último de poesía).

Este blog lo he creado para ir poniendo las cosas más curiosas que he hecho en programación web
y que me han podido servir a lo largo de los años de programar páginas para empresas. Pondré cosas de diseño en HTML y javascript, cosas de PHP, cosas de bases de datos MySQL, Oracle y PostgreSQL y cualquier cosa que considere interesante y que no quiero olvidar cómo se hacía. Si además te sirve a ti cualquier entrada para tu trabajo o por simple curiosidad, para mí será un placer y agradeceré cualquier comentario o crítica que querais hacerme.

Trucos programación web

Iluminar Celdas de una tabla HTML

Objetivo del Blog