oldschwinn
asked on
Changing the Background and Border Color of a <TD> onMouseOver
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 align="right" class="small_white">[<a href="#" class="link_white">ADD</a>
</table>
</td></tr>
<tr class="selected"><td width="18"><img src="../images/icons/folde
<tr onMouseOver="this.classNam
<tr onMouseOver="this.classNam
<tr onMouseOver="this.classNam
</table>
</td></tr>
</table>
</td>
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 align="right" class="small_white">[<a href="#" class="link_white">ADD</a>
</table>
</td></tr>
<tr class="selected"><td width="18"><img src="../images/icons/folde
<tr onMouseOver="this.classNam
<tr onMouseOver="this.classNam
<tr onMouseOver="this.classNam
</table>
</td></tr>
</table>
</td>
ASKER
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?
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 align="right" class="small_white">[<a href="#" class="link_white">ADD</a>
</table>
</td></tr>
<tr class="selected">
<td width="18">
<img src="../images/icons/folde
</td>
<td colspan="2">
<b>Main</b>
</td>
</tr>
<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColo
<td class="folder_table_td" width="18"><img src="../images/icons/folde
<td class="folder_table_td" colspan="2">Draft Campaigns</td>
</tr>
<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColo
<td class="folder_table_td" width="18"><img src="../images/icons/folde
<td class="folder_table_td" colspan="2">Old Campaigns</td>
</tr>
<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColo
<td class="folder_table_td" width="18"><img src="../images/icons/trash
<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).tagNam
children.item(i).className
}
}
</script>
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 align="right" class="small_white">[<a href="#" class="link_white">ADD</a>
</table>
</td></tr>
<tr class="selected">
<td width="18">
<img src="../images/icons/folde
</td>
<td colspan="2">
<b>Main</b>
</td>
</tr>
<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColo
<td class="folder_table_td" width="18"><img src="../images/icons/folde
<td class="folder_table_td" colspan="2">Draft Campaigns</td>
</tr>
<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColo
<td class="folder_table_td" width="18"><img src="../images/icons/folde
<td class="folder_table_td" colspan="2">Old Campaigns</td>
</tr>
<tr class="folder_table_tr" onClick="alert('Hello');" onMouseOver="ChangeRowColo
<td class="folder_table_td" width="18"><img src="../images/icons/trash
<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).tagNam
children.item(i).className
}
}
</script>
<html>
<head>
<script>
var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,text
if(typeof(preEl)!='undefin
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,
}
var el = event.srcElement;
el = el.parentElement;
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;
try{ChangeTextColor(el,tex
preEl = el;
}
function ChangeTextColor(a_obj,a_co
for (i=0;i<a_obj.cells.length;
a_obj.cells(i).style.color
}
</script>
</head>
<body>
<table border=1 align=center>
<caption>Statistics</capti
<th>Year</th>
<th>Team</th>
<tr onMouseOver="HighLightTR('
<td align=right>1930</td>
<td align=right>Detroit</td>
</tr>
<tr onMouseOver="HighLightTR('
<td align=right>1933</td>
<td align=right>Detroit</td>
</tr>
<tr onMouseOver="HighLightTR('
<td align=right>1934</td>
<td align=right>Detroit</td>
</tr>
<tr onMouseOver="HighLightTR('
<td align=right>1935</td>
<td align=right>Detroit</td>
</tr>
</table>
</body>
</html>
i hope this helps.. regards