Help with changing a table row background

tr_y2k · 04-16-2005, 07:47 PM

hello, i am trying to change the background color & the text color of each row in a table as the mouse does a mouseOver event. How do i go about making the row change the style from one to the other and then back again when the cursor does a mouseOut event. i am including the table source code below. MenuLinks is the style/class i would like the background of the row and the text inside the row to change to. I am very new to this so any help would be greatly appreciated. many thanx

<table width="122" border="0" align="left" cellpadding="0" cellspacing="0" class="0pxMarginCursor" id="menu_layout1">
<tr onClick="MM_openBrWindow('index_scr.htm','','width=226,height=403')" onMouseOver="class='MenuLinks'">
<td width="18" height="18"><img src="images/a_jpg.gif" width="15" height="15" border="0" align="absmiddle"></td>
<td width="94">New Window</td>
<td width="10"> </td>
</tr>
<tr>
<td width="18" height="18"><img src="images/a_htm.gif" width="15" height="15" border="0"></td>
<td width="94">Sage Online </td>
<td width="10"> </td>
</tr>
<tr onMouseOver="MM_showHideLayers('menu2','','show')" onMouseOut="MM_showHideLayers('menu2','','hide')">
<td width="18" height="18"><img src="images/a_oth.gif" width="15" height="15" border="0"></td>
<td width="94">Work Files </td>
<td width="10"><img src="images/but_menu_select.gif" name="image_select" width="10" height="10" border="0" align="absmiddle" id="image_select"></td>
</tr>
<tr>
<td width="18" height="18"><img src="images/a_gif.gif" width="15" height="15" border="0"></td>
<td width="94">Open Websites </td>
<td width="10"> </td>
</tr>
<tr>
<td width="18" height="18"><img src="images/a_build.gif" width="15" height="15" border="0"></td>
<td width="94">Solar Network </td>
<td width="10"> </td>
</tr>
<tr>
<td width="18" height="18"><img src="images/a_drmx.gif" width="15" height="15" border="0"></td>
<td width="94">Global Stats</td>
<td width="10"> </td>
</tr>
<tr>
<td width="18" height="18"><img src="images/a_winxp.gif" width="15" height="15" border="0"></td>
<td width="94">Close</td>
<td width="10"> </td>
</tr>
</table>

coothead · 04-16-2005, 08:47 PM

Hi there tr_y2k,

here is a script...

Code:

<script type="text/javascript">
<!--
function showRow(el) {
   el.style.background="#800";
   el.style.color="#008";

el.onmouseout=function() {
   el.style.background="";
   el.style.color="";
  }
 }
//-->
</script>

place this snippet in the rows that you want to highlight...

Code:

<tr onmouseover="showRow(this)">

coothead