Change style class of TR OnMouseOver
Hi
I've got a TR that looks like this:
<tr class="nav-red-nor">
<td width="77%" height="25"> Hanes</td>
<td width="23%" height="25" valign="middle" align="center"><img src="images/logo_tran_nav.gif" width="20" height="20"></td>
</tr>Now what I want to do is to when an OnMouseOver event occurs, the style class of the TR changes from 'nav-red-nor' to 'nav-red-sel'. I've tried:
OnMouseOver="this.style='nav-red-sel'"But that doesn't want to work. Any ideas?
Thanks!
- wil
Abhishek Reddy posted this at 09:56 — 25th February 2002.
He has: 3,348 posts
Joined: Jul 2001
The onMouseOver code should go into the tag thats being altered so that "this.xx" can occur. And the proper DOM is usually this.tagProperty, so in your case you'd use this.class='nav-red-sel'.
I'm not sure if onMouseOver works with a but try it anyway.
Wil posted this at 10:38 — 25th February 2002.
They have: 601 posts
Joined: Nov 2001
Hm. Thanks for your response. Unfortunately, this didn't work. This is my CSS code:
TR.nav-blue-sel { font-family: Arial, Helvetica, sans-serif;font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #0072E5 }
TR.nav-blue-nor { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0072E5;
background-color: #FFFFFF }
TD.nav-blue-sel { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #0072E5 }
TD.nav-blue-nor { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0072E5;
background-color: #FFFFFF }
And here's my HTML code. As you can see, I've tried it with the TR and with the TD re your comment on this not being applicable to TRs.
<tr class="nav-blue-nor" OnMouseOver="this.class='TR.nav-blue-sel'"><td width="77%" height="25" OnMouseOver="this.class='TD.nav-blue-sel'"> Saesneg</td>
<td width="23%" height="25" valign="middle" align="center"><img src="images/logo_tran_nav.gif" width="20" height="20"></td>
</tr>
I've also tried removing the TR and the TD from the beginning of the class:
<tr class="nav-blue-nor" OnMouseOver="this.class='nav-blue-sel'"><td width="77%" height="25" OnMouseOver="this.class='nav-blue-sel'"> Saesneg</td>
<td width="23%" height="25" valign="middle" align="center"><img src="images/logo_tran_nav.gif" width="20" height="20"></td>
</tr>
But none of these work, and no error message. The URL, for reference is at:
http://penweddig.fbagroup.co.uk/blue.html
Thanks for your help.
- wil
mairving posted this at 13:13 — 25th February 2002.
They have: 2,256 posts
Joined: Feb 2001
Wil, I don't think that it is going to work in . You should have the code in . I also don't see anything about the onmouseout value. Here is the code that I usually use:
<?php<TD bgcolor=\"color\" onMouseOut=\"this.class='class';\" onMouseOver=\"this.class='class';\"></TD>
?>
Mark Irving
I have a mind like a steel trap; it is rusty and illegal in 47 states
Wil posted this at 14:08 — 25th February 2002.
They have: 601 posts
Joined: Nov 2001
Hm. This is so strange. I must be doing something very wrong. I've now got:
<?php<td width=\"77%\" height=\"25\" class=\"nav-blue-nor\" OnMouseOver=\"this.class='nav-blue-sel'\" OnMouseOut=\"this.class='nav-blue-nor'\"> Saesneg</td>
?>
Which still doesn't work.
The page is @:
http://penweddig.fbagroup.co.uk/blue.html
Can anyone sport any errors with the code?
- wil
mairving posted this at 14:18 — 25th February 2002.
They have: 2,256 posts
Joined: Feb 2001
Did you change your stylesheet to TD.class instead of TR.class?
Wil posted this at 16:36 — 25th February 2002.
They have: 601 posts
Joined: Nov 2001
Yeah, I've now got both TD.class and TR.class in there. Still no joy :-\.
Busy posted this at 21:45 — 25th February 2002.
He has: 6,151 posts
Joined: May 2001
would it be this.class='nav-blue-nor' or this.class:nav-blue-nor
this would only work in IE wouldnt it?
one I found ages ago (only works in IE) is this:
<script language="JavaScript">
function tabover(elem, filename, textcolor)
{elem.background = filename;elem.children.tags('a')[0].style.color = textcolor}
</script>
and in your table, something like:
I used the images as I needed rounded corners, could probably be swaped back to RGB
Abhishek Reddy posted this at 04:46 — 26th February 2002.
He has: 3,348 posts
Joined: Jul 2001
I'm sure it's "=" and not ":". JS uses "=" for assignation, styles are set with ":".
In your styles, remove "TR" and "TD". Just leave it as ".xyz". It'll apply the styles to anything with "xyz" in it's class property. Then use the onMouseover with a . I haven't tested it, but as always, try it anyway.
Wil posted this at 10:27 — 26th February 2002.
They have: 601 posts
Joined: Nov 2001
Thanks for all your help guys. I've now got this:
.nav-blue-sel { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #0072E5 }
.nav-blue-nor { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #0072E5;
background-color: #FFFFFF }
<td width="77%" class="nav-blue-nor" OnMouseOver="this.class:nav-blue-sel" height="25">
The initial style is set just fine, but the OnMouseOver event never happens.
I've also tried this.class='nav-blue-sel' to no avail.
http://penweddig.fbagroup.co.uk/blue.html
It can be seen in the above URL.
Anymore suggestions?
- wil
Wil posted this at 17:11 — 26th February 2002.
They have: 601 posts
Joined: Nov 2001
Yes! Got it!!
I should use this.className='' and not this.class='' as I had been using.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.