?
Solved

onMouseOver, onMouseOut, background-color...

Posted on 2003-02-20
9
Medium Priority
?
2,010 Views
Last Modified: 2010-08-05
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
Comment
Question by:cypher3ll3
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +3
9 Comments
 
LVL 3

Expert Comment

by:hexagon47
ID: 7987700
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
 
LVL 1

Expert Comment

by:tripst3r
ID: 7988057
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
 

Expert Comment

by:tbaseflug
ID: 7988392
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
Independent Software Vendors: 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!

 

Author Comment

by:cypher3ll3
ID: 7988580
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
 
LVL 2

Expert Comment

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

Author Comment

by:cypher3ll3
ID: 7989760
Kovis,

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

TIA,
gibb
0
 
LVL 5

Accepted Solution

by:
kasandra earned 80 total points
ID: 7990541
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
 
LVL 3

Expert Comment

by:hexagon47
ID: 7992787
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
 
LVL 5

Expert Comment

by:kasandra
ID: 8001938
Thanks for the A cypher! :)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month12 days, 8 hours left to enroll

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question