asked on

onMouseOver, onMouseOut, background-color...

Hi,

I have a following HTML code:

<TR onMouseOver="this.style.background='#C1D1E2'" onMouseOut="this.style.background='#F0F8FF'">
<TD style="background-color:#F0F8FF;"> blah </TD>
</TR>

When a mouse is over this row, the background color does not change. Is this because I specify the bg color in the <TD> tag? 'Cause when I remove that from <TD>, onMouseOver and onMouseOut work fine. Is there any way that I can accomplish the both, leaving the bg color in <TD> and changing its bg color when the mouse is over that row.

TIA,
gibb

hexagon47

your code would work fine for all the other cells in the row, but having only one cell that overlaps the effecct that you specify in the row

you can put an id to both the row and the cell and change the action according to your needs

the code below should do it

<table border="1">
<tr onMouseOver="myRow.style.background='#C1D1E2';myCell.style.background='#C1D1E2';" onMouseOut="myRow.style.background='#F0F8FF';myCell.style.background='#F0F8FF'" id="myRow">
<td style="background-color:#F0F8FF;" id="myCell"> blah </td>
</tr>
</table>

hope that is what you meant

p.s. if you'd have more cells in the table you would see the effect in the cell where you did not specify a background-color

Member_2_990091

It may also be a browser quirk. I've had problems with dynamically changing styles when the style I'm setting is not exactly specified inline, the way you are setting background dynamically but don't have a background property set for the TR. Try setting a background explicitly for the TR.

tbaseflug

How can the OnMouseover event be set to an Onclick? I wanted to take something similar so that when the user clicks on the row it sets the bkg color and (via a checkbox selection on that row) and yet when they check a checkobx on another row, it resets the color back on the first row and sets this newly select row (via checkbox) to a certain color?

cypher3ll3

ASKER

hexagon47,

I tried your solution, but I got a javascript runtime error. It indicates that myRow.style is NULL or not an object. I did specify myRow as you showed it in the comment. Any idea?

TIA,
gibb

Kovis

What was the browser you tried with? You could try referring to rows by table's row collection.

cypher3ll3

ASKER

Kovis,

IE6. Table's row collection... can you point me to that???

TIA,
gibb

ASKER CERTIFIED SOLUTION

kasandra

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hexagon47

cypher
kasandra should be right,

regarding the row collection

go to http://msdn.microsoft.com/library/default.asp

on the left menu go web development / html and dynamic html / sdk documentation / reference / objects

there you have the "table" object and all the collection blonging to it (yes row as well)

kasandra

Thanks for the A cypher! :)