Highlight Table Cells Script - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Highlight Table Cells Script

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. Updated to allow you to exclude particular cells from the rollover effect.


Insert into <HEAD>
<script language="JavaScript1.2"> function changeto(highlightcolor){ source=event.srcElement if (source.tagName=="TR"\|\|source.tagName=="TABLE") return while(source.tagName!="TD") source=source.parentElement if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore") source.style.backgroundColor=highlightcolor } function changeback(originalcolor){ if (event.fromElement.contains(event.toElement)\|\|source.contains(event.toElement)\|\|source.id=="ignore") return if (event.toElement!=source) source.style.backgroundColor=originalcolor } </script>

Insert into <BODY>


Other Options
Now, to apply the "highlight" effect to a table, simply add the following code inside the <table> tag itself, like below: <table onMouseover="changeto('lightgreen')" onMouseout="changeback('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>