OP
OP
Rab
Member
Highlight Table Cells Script
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.
Step 1: Inser this in the <head> of the layout.php:
Now, to apply the "highlight" effect to a table, simply add the following code inside the <table> tag itself, like below:
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:
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:
Demo: Savage - Latest News
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.
Step 1: Inser this in the <head> of the layout.php:
Code:
<script type="text/javascript">
//Specify highlight behavior. "TD" to highlight table cells, "TR" to highlight the entire row:
var highlightbehavior="TD"
var ns6=document.getElementById&&!document.all
var ie=document.all
function changeto(e,highlightcolor){
source=ie? event.srcElement : e.target
if (source.tagName=="TABLE")
return
while(source.tagName!=highlightbehavior && source.tagName!="HTML")
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}
function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}
function changeback(e,originalcolor){
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")
return
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))
return
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
</script>Now, to apply the "highlight" effect to a table, simply add the following code inside the <table> tag itself, like below:
Code:
<table onMouseover="changeto(event, 'lightgreen')" onMouseout="changeback(event, 'white')">
"
"
</table>To exclude any cell(s) from the rollover effect, simply give that cell an id="ignore" declaration, inserted inside the <td> tag. For example:
Code:
<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:
Code:
<table onMouseover=.... onMouseout=...>
<tr id="ignore">
<td>Main Menu</td>
<td>Eggs</td>
<td>Ham</td>
</tr>
</table>
