Iluminar Celdas de una tabla HTML

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.