The issue is that table cells are "light up" when you mouse over them, and "Deluminator" when the mouse out of them. This assemble
our table and give names to each TD that can be illuminated. For example:
\u0026lt;table>
\u0026lt;tr>
\u0026lt;td name="c1" id="c1">
\u0026lt;/ td> \u0026lt;td name="c2" id="c2"> ;
\u0026lt;/ td> \u0026lt;/ tr>
\u0026lt;/ table>
and now control their events onmouseover and onmouseout as follows:
\u0026lt;td
\u0026lt;table> \u0026lt;tr> name="c1" id="c1" onmouseover="javascript:Iluminar(this)" onmouseout="javascript:Apagar(this)">
\u0026lt;/ td> ; \u0026lt;td id="c2" name="c2" onMouseOver="javascript:Iluminar(this)" OnMouseOut="javascript:Apagar(this)"> \u0026lt;/ td> \u0026lt;/ tr>
\u0026lt;/ table>
This means that every time we pass over the cell c1 or c2 is called Illuminate javascript function () passing as a parameter "this" (ie, the cell itself) and when it leaves the Shutdown is called.
functions to Lighten and off using the property className of the object, so that if I designed a CSS style like this:
\u0026lt;style>
. cell
{background-color : # 0000FF;
color: # ffffff;
font-weight: bold;}
. celda_iluminada
{background-color: # FF0000;
color: # FFFF00;
font-weight: bold;
} \u0026lt;/ style>
I can change at any time the style class of an object simply by doing the following in javascript: function
Lighting (obj) {
obj.className = "celda_iluminada"
} function Hide (obj) {
obj.className = "cell";}
Another option without using style sheets is to change the background color of the cell as follows:
Lighting function (obj) {
obj.style.bgColor = "# FF0000 "}
function Hide (obj) {
obj.style.bgColor = "# 0000FF "}
But even if this is correct, I change the className to change several properties in one go (not just background but also the font color and in general everything that can be included in a CSS class) while doing it for style modifications need one line for each property you want to change.
