Situation: The project has a requirement that the cells in a table change background and text colors when the cursor is over them.

Rollover changes are common for links, but can also be useful with other elements. Here we highlight table cells by changing the background color and text color when the mouse is over them. The methods shown here can be adapted to other objects and other event types.

JavaScript, Cascading Style Sheets or a combination of the two can be used. Three different approaches are presented in this How-to. All examples use bare minimum code for illustration and may need to be enhanced for your projects.

Two classic (i.e. old fashioned) Javascript methods are presented on this page. These will work on virtually any browser. The subsequent pages cover more newer methods. These are presented for the sake of completeness, just in case you have to support a difficult browser, and to provide a foundation for the later material.

Classic JavaScript Solution 1  

The first solution use CSS with simple JavaScript in-line event handling. The onMouseOver and onMouseOut event properties for each table cell that responds to the rollover is assigned a line of code changing the class name of the table cell (TD).

Tested and Worked on:
Netscape 7 +, Konqueror 3.x +, Mozilla 1.3.1 & 1.7+ Opera 7.21, Opera 6.0.2, FireFox, IE 5.0, IE 5.5, IE 6.0.28
Should work on all graphical browsers since IE 3 and Netscape 4.

Try it! Run your mouse over the table and see the cell colors change.

Column1 Column2
Data 1.1 Data 1.2
Data 2.1 Data 2.2
Data 3.1 Data 3.2

Here is the CSS

        <style type="text/css">
            .hlt {
                background-color: #f8f800;
                color: #000;
            }
        </style>

And here is the in-line code for the event handlers.

<td onmouseover="this.className = 'hlt';" onmouseout="this.className = '';">Data 2.1</td>

This needs little explanation. There is a CSS style rule for the highlighted (htl) appearance. The non-highlighted appearance is inherited (i.e. whatever the table or row (tr) style is). The pronoun this references the cell (TD element). Setting the className to an empty string reverts to the inherited style. An explicit style could be used for the nonhighlighted appearance.

Classic JavaScript Solution  

This is a classic example relying on a single JavaScript function as the mouse event handler. This solution requires that onMouseOver and onMouseOut for each table cell that responds to the rollover be assigned the event handler.

Tested and Worked on:
Netscape 7 +, Konqueror 3.x +, Mozilla 1.3.1 & 1.7+ Opera 7.21, Opera 6.0.2, FireFox, IE 5.0, IE 5.5, IE 6.0.28
Should work on all graphical browsers since IE 3 and Netscape 4.

Try it! Run your mouse over the table and see the cell colors change.

Column1 Column2
Data 1.1 Data 1.2
Data 2.1 Data 2.2
Data 3.1 Data 3.2

Let's look at the code and see how it works. Starting with the JavaScript function.

        <script type="text/javascript">
            function roll(obj, highlightcolor, textcolor){
                obj.style.backgroundColor = highlightcolor;
                obj.style.color = textcolor;
            }
        </script>

And here is a sample of the HTML where the in-line code is.

    <td onMouseover="roll(this, 'yellow', 'black');
        onMouseout="roll(this, 'darkcyan','white');">Data 1.1</td>

The code is very simple. In the <head> section is a two line JavaScript function (shown above). It accepts three arguments: a reference to the table cell, the background color and the text color. Using the reference to the table cell, the function assigns the new colors to the table cell's style properties. The same function is used to both set the highlight colors and to set the nonhighlighted colors.

The function could change the class name like the first example to achieve the same affect.

In each <td> tag the onMouseOver and onMouseOut events are assigned the roll function as the event handler with the appropriate arguments. Notice the use of the special pronoun this. Again, that is a direct reference to the table cell.

If an attribute of an element's style object is set to an empty string, the attribute value reverts to that specified earlier in the style sheet cascade or the inherited value.

Coded in-line as done here, the pronoun this must be passed as an argument to any function assigned to the event handler because that function has a global context; i.e. it is not a method of the element. Other techniques for attaching event handlers make them methods of the element, and the pronoun this within the handler will refer to the element.

The function is generic enough to be highly reusable across a variety of HTML elements. And, it is very portable working on a wide variety of browsers without modification.