Highlight Table Cells Script
Last updated: Feb 4th, 04' for ability to highlight entire table rows
Description: Give any table a "rollover" personality with this script! Using it, you can allow the cells of any given table to change color when the mouse rolls over them. This is a very powerful script that can add a little magic to any table, whatever the table is used for. The script can highlight either individual table cells (<TD>), or entire rows (<TR). You may also exclude select cells/rows from being highlighted.
Demo:
Table 1 (links): | Table 2 (spreadsheet): | ||||||||||||||||
|
|
Simply insert the below into the <head> section of your page:
Now, to apply the "highlight" effect to a table, simply add the following code inside the <table> tag itself, like below:
<table onMouseover="changeto(event,
'lightgreen')"
onMouseout="changeback(event, 'white')">
"
"
</table>
Where "lightgreen" represents the color the cells change to when the mouse is over them, and "white" the color when the mouse moves out. Feel free to change these values to another.
To exclude any cell(s) from the rollover effect, simply give that cell an id="ignore" declaration, inserted inside the <td> tag. For example:
<table onMouseover=.... onMouseout=...> <td id="ignore">Main Menu</td> <td>Eggs</td> <td>Ham</td> </table>
If you had set the script to highlight entire table rows (by changing a variable inside the script), you can also specify the script to ignore the entire row, by adding id="ignore" inside the desired <TR> tag:
<table onMouseover=.... onMouseout=...> <tr id="ignore"> <td>Main Menu</td> <td>Eggs</td> <td>Ham</td> </tr> </table>