JavaScript Tutorial: Dynamically changing the color of a row or cell using CSS & Javascript

jawahar
11/6/2005 5:13:40 AM, Views: 2381

The following code/tutorial shows how to change the color of a cell/row on mouseover(moving the mouse over the cell)

<HTML>
<HEAD>
<script language=JavaScript>
function rowOverEffect(object) {
if (object.className == 'dataTableRow') object.className = 'dataTableRowOver';
}

function rowOutEffect(object) {
if (object.className == 'dataTableRowOver') object.className = 'dataTableRow';
}
</script>

<STYLE>
.dataTableHeadingRow { background-color: #C9C9C9; }
.dataTableHeadingContent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold; }
.dataTableRow { background-color: #F0F1F1; }
.dataTableRowSelected { background-color: #DEE4E8; }
.dataTableRowOver { background-color: #00A5BA; cursor: pointer; cursor: hand;}
.dataTableContent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
</STYLE>
</HEAD>
<BODY>
<table border="0" width="100%" cellspacing="1" cellpadding="2">
<tr class="dataTableRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)">
<td class="dataTableContent" height=30 align="right">This tutorial shows how to change the color of a cell/row on mouseover</td>
</tr>
<tr class="dataTableRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)">
<td class="dataTableContent" height=30 align="right">The mouseover effect can be seen when the mouse is moved over the cell</td>
</tr>
<tr class="dataTableRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)">
<td class="dataTableContent" height=30 align="right">and also when it is moved out of the cell</td>
</tr>
</table>
</BODY>
</HTML>