?
Solved

Changing the Background and Border Color of a <TD> onMouseOver

Posted on 2005-03-30
7
Medium Priority
?
396 Views
Last Modified: 2008-01-16
OK, I really thought this one was going to be simple and I could figure it out in a half hour or so. Well, two hours later it’s still not working! I still think it’s pretty easy for someone who knows what they’re doing.

I’m just trying to do some fairly simple style swapping with onMouseOver and OnMouseOut. I’ve been changing background colors for years and now I’m just trying to do one or two more things but I cannot get it to work.

Basically, I have a table and when the user mousse over a row I’m trying to change the background color AND the border color for that row. This is the part that I cannot get to work. I can get it to work on a <TD> but not on a <TR>. I know that I’ve got something overriding something else, but I just cannot figure it out.

I’m trying to achieve an effect just like Yahoo mail. When the user mousse over a row, that row changes it’s background color and border. Also the entire row is “clickable” (i.e. when the user mouses over any part of the row the cursor changes). And finally, the last row has two different links in it so I’m not sure how that’s going to work? If you have Yahoo mail you can take a look at exactly what I’m trying to achieve.

Here’s what I got so far:

<style>

td            {
            font-family: verdana, arial, helvetica, sans-serif;
            color: #333333;
            font-size: 11px;
            }
            
.white  {
            font-family: verdana, arial, helvetica, sans-serif;
            color: #ffffff;
            font-size: 11px;
            }
            
.folder_table {margin:2px; padding:2px; background:#EEEEEE; border:solid 1px #999999}

.folder_table tr.selected {
      background-color: #C1D2EE;
      border: 1px solid #316AC5;
}

.folder_table tr.over {
      background-color: #999999;
      border: 1px solid #666666;
}

.folder_table tr.out {
      background-color: #EEEEEE;
      border: 1px solid #EEEEEE;
}
</style>


<td bgcolor="#900028" width="160" valign="top">

<table width="100%" cellpadding="8" cellspacing="0" border="0">
<tr><td valign="top">
<table width="148" cellpadding="0" cellspacing="0" border="0" class="folder_table">
<tr bgcolor="#000000" height="23">
<td colspan="3">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="white"><b>FOLDER</b></td>
<td align="right" class="small_white">[<a href="#" class="link_white">ADD</a> &#150; <a href="#" class="link_white">EDIT</a>]</td></tr>
</table>
</td></tr>

<tr class="selected"><td width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td><td colspan="2"><b>Main</b></td></tr>

<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/folder_open.gif" width="18" height="18" border="0"></td><td colspan="2">Draft Campaigns</td></tr>


<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td><td colspan="2">Old Campaigns</td></tr>

<tr onMouseOver="this.className='over'" onMouseOut="this.className='out'"><td width="18"><img src="../images/icons/trash.gif" width="18" height="18" border="0"></td><td>Trash</td><td align="right" class="small">[<a href="#">EMPTY</a>]</td></tr>

</table>
</td></tr>
</table>
</td>
0
Comment
Question by:oldschwinn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
7 Comments
 

Expert Comment

by:l0_0laelien
ID: 13665894
Hi, you can change the color of the TR and the font color like this:

<html>
<head>
<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,textColor){
  if(typeof(preEl)!='undefined') {
     preEl.bgColor=orgBColor;
     try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
     }
  var el = event.srcElement;
  el = el.parentElement;
  orgBColor = el.bgColor;
  orgTColor = el.style.color;
  el.bgColor=backColor;

  try{ChangeTextColor(el,textColor);}catch(e){;}
  preEl = el;
  }

function ChangeTextColor(a_obj,a_color){  ;
   for (i=0;i<a_obj.cells.length;i++)
    a_obj.cells(i).style.color=a_color;
    }
</script>
</head>
<body>
<table border=1 align=center>
<caption>Statistics</caption>
<th>Year</th>
<th>Team</th>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1930</td>
<td align=right>Detroit</td>
</tr>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1933</td>
<td align=right>Detroit</td>
</tr>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1934</td>
<td align=right>Detroit</td>
</tr>
<tr  onMouseOver="HighLightTR('#c9cc99','cc3333');" >
<td align=right>1935</td>
<td align=right>Detroit</td>
</tr>
</table>

</body>
</html>
i hope this helps.. regards
0
 

Author Comment

by:oldschwinn
ID: 13667005
l0_0laelien,

I guess that's part of it, but I still cannot figure out how to do the <TR> border color or the link for the entire <TR>.

Maybe this is not as straightforward as I thought?

I'm increasing the points to 125.

Anyone?
0
 

Accepted Solution

by:
l0_0laelien earned 252 total points
ID: 13701461
hi oldschwinn i really have never seen how you can change the border color of the <TR> only the <TD>'s  but i've seen that when you apply the border-color style to the <TD> it changes only the bottom and left borders of the cell, you can make a <div> insede the <TD>'s and then change the div style..
regards
0
 
LVL 2

Assisted Solution

by:TkoMan
TkoMan earned 248 total points
ID: 13758634
oldschwinn,

How is this?(below)
The <tr> element doesn't contain a style.border attribute in the browsers DOM.
In order to create the effect  you need to change the all of the <td> elements that belong to the <tr>
You only need to change the top and bottom of the border.
Please note that in the example below I have assigned the <td>'s a class (folder_table_td) that gives them a border of 1px the same
color as the background. This is because if you have no border then assign a border when the browser rerenders the
page it shifts all the elements down a bit to make room for the border and looks messy.

Good Luck


<table>



<td bgcolor="#900028" width="160" valign="top">

<table width="100%" cellpadding="8" cellspacing="0" border="">
<tr><td valign="top">
<table width="148" cellpadding="0" cellspacing="0" border="1" class="folder_table">
<tr bgcolor="#000000" height="23">
<td colspan="3">

<table width="100%" cellpadding="0" cellspacing="0" border="">
<tr>
      <td class="white"><b>FOLDER</b></td>
      <td align="right" class="small_white">[<a href="#" class="link_white">ADD</a> &#150; <a href="#" class="link_white">EDIT</a>]</td></tr>                                        
</table>

</td></tr>

<tr class="selected">
      <td width="18">
            <img src="../images/icons/folder.gif" width="18" height="18" border="0">
      </td>
      <td colspan="2">
            <b>Main</b>
      </td>
</tr>

<tr style="border:1px solid blue" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')" >
      <td class="folder_table_td" width="18"><img src="../images/icons/folder_open.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Draft Campaigns</td>
</tr>


<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Old Campaigns</td>
</tr>

<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/trash.gif" width="18" height="18" border="0"></td>
      <td>Trash</td><td align="right" class="small">[<a href="#">EMPTY</a>]</td>
</tr>

</table>
</td></tr>
</table>
</td>

<script>
function ChangeRowColor(thisObj, newClassName)
{
      var children = thisObj.childNodes;
      
      for(i = 0; i < children.length; i++)
      {
            if(children.item(i).tagName == "TD")
                  children.item(i).className = newClassName;
                  
      }

}

</script>
0
 
LVL 2

Expert Comment

by:TkoMan
ID: 13758645
oops, for testing purposes I set the table border to one, it should be 0.
here it is again. :)

<table>



<td bgcolor="#900028" width="160" valign="top">

<table width="100%" cellpadding="8" cellspacing="0" border="">
<tr><td valign="top">
<table width="148" cellpadding="0" cellspacing="0" border="0" class="folder_table">
<tr bgcolor="#000000" height="23">
<td colspan="3">

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
      <td class="white"><b>FOLDER</b></td>
      <td align="right" class="small_white">[<a href="#" class="link_white">ADD</a> &#150; <a href="#" class="link_white">EDIT</a>]</td></tr>                                        
</table>

</td></tr>

<tr class="selected">
      <td width="18">
            <img src="../images/icons/folder.gif" width="18" height="18" border="0">
      </td>
      <td colspan="2">
            <b>Main</b>
      </td>
</tr>

<tr class="folder_table_tr"  onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')" >
      <td class="folder_table_td" width="18"><img src="../images/icons/folder_open.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Draft Campaigns</td>
</tr>


<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/folder.gif" width="18" height="18" border="0"></td>
      <td class="folder_table_td" colspan="2">Old Campaigns</td>
</tr>

<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColor(this,'rowOver')" onMouseOut="ChangeRowColor(this,'rowOut')">
      <td class="folder_table_td" width="18"><img src="../images/icons/trash.gif" width="18" height="18" border="0"></td>
      <td>Trash</td><td align="right" class="small">[<a href="#">EMPTY</a>]</td>
</tr>

</table>
</td></tr>
</table>
</td>

<script>
function ChangeRowColor(thisObj, newClassName)
{
      var children = thisObj.childNodes;
      
      for(i = 0; i < children.length; i++)
      {
            if(children.item(i).tagName == "TD")
                  children.item(i).className = newClassName;
                  
      }

}

</script>
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question