How do you highlight a table data (<TD>) without using fancy javascript routine?

There are many sites in the world that are using fancy javascript functions or subroutines to deal with the dynamic CSS.

But what if we only need to control a small part of our website? Can we use a quick and dirty method without having to mess with function calls to and fro javascript engine?

Here is a simple way to do it. Put these in your <TD>:

<TABLE><TR><TD width=100 onmouseover="this.style.background='#ffdddd';this.style.cursor='pointer';" onmouseout="this.style.background='#ffeeee';" onclick="[your click destination]">CLICK</TD></TR></TABLE>

You can also change the background image dynamically using this method:

<TABLE><TR><TD width=100 onmouseover="this.style.background='url(/img/background1.gif)';this.style.cursor='pointer';" onmouseout="this.style.background='url(/img/background2.gif)';" onclick="[your click destination]">CLICK</TD></TR></TABLE>



You can also replace [your click destination] with location.href = 'http://www.yahoo.com'; or you can assign a link anchor (<A>) to the CLICK.

Cool isn't it? Wow! Now you don't need to deal with so much javascript. Whew!


Bottom line: this trick relies on onmouseover="this.style..... as shortcut to avoid javascript function calls.