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
cypher3ll3Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hexagon47Commented:
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
0
tripst3rCommented:
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.
0
tbaseflugCommented:
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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

cypher3ll3Author Commented:
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
0
KovisCommented:
What was the browser you tried with? You could try referring to rows by table's row collection.
0
cypher3ll3Author Commented:
Kovis,

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

TIA,
gibb
0
kasandraCommented:
As tripst3r correctly pointed out, you need to explicity set a style for the row if you want to refer to it to change it dynamically, hence the error that it is null:

<table border="1">
<tr style="background-color:#F0F8FF;" 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>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hexagon47Commented:
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)
0
kasandraCommented:
Thanks for the A cypher! :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.