Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Change a TD Background-color with JavaScript?

How to do it with onMouseOver?



12:53 pm on Dec 10, 2002 (gmt 0)

10+ Year Member

Good morning,

I've a table with some different background-coloured cells (td) whose colour I want to change to white when the mouse is over and then revert each one to its previous colour when mouse is out.

I think I can do that with CSS, Javascript and classes, but I'd like to do it "the proper way", that is: for Netscape 6 and Explorer 5 and upper. I don't have any clue of how to manipulate the backround-color of a given class to do that: onMouseOver=....?

Could anybody lend me a helping hand or put me in the right direction.

Thanks a lot in advance


PS. I try to be xhmtl 1.1 compliant (and up to now, I've been succesful)


1:32 pm on Dec 10, 2002 (gmt 0)

10+ Year Member

IS this what you mean ...

<td width="20%" bgcolor="#6699ff" valign="top" onMouseover="this.bgColor='#e7efff'"onMouseout="this.bgColor='#6699ff'" align="center"><font size="2"><a style="font-family: tahoma; font-size: 10pt; color: #000000; text-decoration: none" title="Widgets" href="example.htm" target="main">Buy a Widget</a></font></td>

Or am I missing the point. :)


2:11 pm on Dec 10, 2002 (gmt 0)

10+ Year Member

Well, somehow it is but it's not that: It's a table with 16 cells. Each one has one colour. Some of them can be printed in a printing press and some, cannot.

The idea is that when the user passes the mouse over a non-printable colour, all non printable colours turn white, and when the mouse goes "out", they revert to their previous colour. So the user can learn the difference between them.

As I said, I think this can be achieved altering a class attributes. But I just know how to change an element with an "id='joe'" not a "class='joe'".

Any idea, please :)


Featured Threads

Hot Threads This Week

Hot Threads This Month