highlightning rows AND links through javascript

This tutorial will help you create a table with mulitple rows and colums, allowing you to make the style change in the entire row whenever you do a mouse over. You need to do the following:

1. Create a stylesheet, including the two styles you would like to apply to the row in the table [active and non-active].
For example:

}.unactive{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #333333;

}.active{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #ffffff;
 background: #64A4B5;

2. Create your html document, attach the stylesheet, and create the table.
3. Add the follwing code to each row:

<tr class="unactive" onMouseOver="this.className='active'" onMouseOut="this.className='unactive'" style="CURSOR: hand"><td>[content]</td><td>[content]</td></tr>.
The addition of "style="cursor..." is not necessary, just a question of taste. The code allows multiple cells within the row.

4. As soon as you add a link to the row, you will see that the text will become underlined and blue. In order to keep the style that you have just created, you need to make sure that it stays valid as soon as an <a> tag enters. This you do by fine-tuning your css styles in your style sheet:

}.active a{
 color: #FFFFFF;
 text-decoration: none;
}.unactive a{
 color: #333333;
 text-decoration: none;

We've just told the style what to do as soon as it bumps into an <a> tag: telling it to keep the text colour, as well as getting rid of the default text decoration [underlined and blue].

That's it. Hope it helped you out.

Hi Kat,

This is great, Thank you so much for taking the time.
Allso the hand is a nice addon. Im sure to use it!

Your the first out of 568 readers an 5 months!!
Are you so kind or the only one thats that smart ;)

If you have any questions, maybe i can help you back.
It look's a bit stupid overseing the CSS possibilities
but i'm quit smart with other stuff.

Kind regards,

Alexander Moody