Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2072
  • Last Modified:

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
0
cypher3ll3
Asked:
cypher3ll3
  • 2
  • 2
  • 2
  • +3
1 Solution
 
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now