Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2005-03-30
7
Medium Priority
?
404 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
  • 2
  • 2
5 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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

578 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