Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2005
    Location
    United Kingdom
    Posts
    27
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Question Help with changing a table row background

    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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</td>
    </tr>
    </table>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •