CSS/Javascript??? plz help ..

Hi friends,

Plz help me in this ...

Right now I m using one table which changes color on mouse actions...

For that I m using to types of codes.. I have defined one class in attached style sheet file.. like this..

td.menuTable { background-color: #60B8FE }

and remaining code is included in html code of the table in my webpage... like this.

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#60B8FE" bordercolordark="#FFFFFF">
  <tr align="center" valign="middle">
    <td width="12%" height="30" class=menuTable onMouseOver="this.style.background='#99FF99'" onMouseOut="this.style.background ='#60B8FE'" onClick="this.style.background ='#FF0000'">&nbsp;</td>
    <td width="12%" height="30" class=menuTable onMouseOver="this.style.background='#99FF99'" onMouseOut="this.style.background ='#60B8FE'" onClick="this.style.background ='#FF0000'">&nbsp;</td>
    <td width="12%" height="30" class=menuTable onMouseOver="this.style.background='#99FF99'" onMouseOut="this.style.background ='#60B8FE'" onClick="this.style.background ='#FF0000'">&nbsp;</td>
  </tr>
</table>

It perfectly works for me.. but now I don't want it that way... I want to define all "style" attributes in my style sheet only instead of in html code.

So that in one class I can have all the results.. something like this...

<style>
<!--
.trbox
{
background-color:#FFFFC3;
onmouseover:"this.style.background":#FF00FF;
onMouseout:"this.style.background":#FFFFC3;
onClick:"this.style.background":#FFFFFF;
}
-->
</style>

But unfortunately.. I m not getting results the way I want with above code...

If anyone can understand this.. and can help me to achieve desired results.. then plz help me.

Actually I want something like shown in following link.... plz check

http://www.activewidgets.com/javascript.forum.6379.0/change-background-color-of-a.html

Thanks in advance