Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

OnMouseOver to change both background and test of a table row

Posted on 2003-11-06
4
Medium Priority
?
1,943 Views
Last Modified: 2010-08-05
I am able to change the background of a table row using this.style.backgroundColor

However, I would also like to change the color of the text in that row at the sametime

Currently the code is like this:

                                                 
<TD style="BACKGROUND-COLOR: white"
        onMouseover="this.style.backgroundColor='#c0c0c0'"
                  onMouseout="this.style.backgroundColor='white'"
                  onMouseover="this.style.fontColor='black'",>
                  <A href="help.htm" >Help</A> | </TD>

this changes the background to a gray and back to white when I move off the row.

I want to change the background to gray and the font to black and then return to normal.

0
Comment
Question by:smiffdog
[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
4 Comments
 
LVL 4

Expert Comment

by:intrwrks
ID: 9697197
The <a> has its own set of styles that changes the color of the text that it surrounds. To get your example above to work properly, you will need to change the color of the text in the <a> tag as follows:

<td style="background-color:white;"
     onMouseover="this.style.backgroundColor='#c0c0c0';linkhelp.style.color='black';"
     onMouseout="this.style.backgroundColor='white';linkhelp.style.color='';">
           <a name="linkhelp" href="help.htm">Help</a> |
</td>

Although the above works, it does not look good because the whole cell's background changes before you are able to click the text. I would change it around like this:

<td style="background-color:white;">
     <a onMouseover="this.style.backgroundColor='#c0c0c0';this.style.color='black';"
     onMouseout="this.style.backgroundColor='white';this.style.color='';"
     href="help.htm">Help</a> |
</td>
0
 
LVL 1

Expert Comment

by:dushpat
ID: 9699077
hi smiffdog

save follwing code as html page and get your solution

you can change backround with >> onmouseout="this.style.backgroundColor='#cccccc';

and text with >> this.className='off'"

make class of style sheet on and off

============= your code

<html>
<head>
<title>textcolor</title>
<style type="text/css">
<HEAD>
<!--

.on { color: #ffffff; }
.off { color: #000000; }

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <TD BGCOLOR=#CCCCCC onmouseover="this.style.backgroundColor='#666666';this.className='on'" onmouseout="this.style.backgroundColor='#cccccc';this.className='off'">PKP 101</TD>
  </tr>
</table>
</body>
</html>
0
 
LVL 15

Accepted Solution

by:
Daydreams earned 200 total points
ID: 9701443
Another alternative:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>onMouseover and link</title>
<style type="text/css">
a:link   {color:#c0c0c0;background-color:white;text-decoration:none;cursor:default;}
a:visited  {color:#c0c0c0;background-color:white;text-decoration:none;cursor:default;}
a:hover  {color:#000; background-color:#c0c0c0;text-decoration:none;cursor:default;}
.mylink {text-decoration:underline;cursor:pointer;}
</style>

</head>
<body>
You can see the problem here, as was explained above, that the hover using the "a" is different from the onmouseover event:
<table>
<td style="background-color:white;color:#c0c0c0;cursor:default;" onMouseover="this.style.backgroundColor='#c0c0c0';this.style.color='black'" onMouseout="this.style.backgroundColor='white';this.style.color='#c0c0c0'">This is text. The following is a link: <a href="help.htm" >Help</a>
</td></table>

The following makes your entire row a link, but specifies the text you want to identify as a link with an underline, and a pointer cursor. It's a bit of a hack but it is another alternative:

<table>
<td><a href="help.htm">You can make your whole td a link, and style it so that your text will stand out by giving it it an underline: <span class="mylink">Help</a></span>
</td></table>

You can style your td to have a certain width, height, etc. as well.
</body>
</html>
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9705893
It is poor practice to use inline styles; it defeats the purpose of CSS which is to separate content from presentation.

Use of inline CSS and many event handlers also increases the size of your pages and makes them more difficult to maintain.

There is a much better way to accomplish this:

Create two style classes for your table cells, e.g.

tdMouseOff {background-color:#FFF: color:#009; text-decoraiton:none;}

tdMouseOn {background-color:#FF9; color:#006; text-decoration:underline;}

Now it's time for a little JavaScript:

if(document.getElementsByTagName)
  window.onload = init;

function init()
{
  var allCells = document.getElementsByTagName("td");

  for(var i = 0; i < allCells.length; i++)
  {
    if(allCells[i].className == "tdMouseOff")
    {
      allCells[i].onmouseover = function(){ this.className = "tdMouseOn"; };
      allCells[i].onmouseoout = function(){ this.className = "tdMouseOff"; };
    }
  }
}

Give all the table cells for which you wish to have the mouseover effect class="tdMouseOff". Place this script in the head of your page.

Done.

Should you wish to change the styles or the behaviour of the TD elements at a later date, you can now do so in 30 seconds with a text editor. For many pages, use a linked CSS file and a linked JS file.

Note: for browsers that fully support CSS 2 such as Mozilla/Gecko, Netscape 6/7, Safari, and recent versions of Opera, the scripting is unnecessary, as these browsers support the :hover pseudoclass on practically any HTML tag, e.g.

td.myCell {background-color:#FFF: color:#009; text-decoraiton:none;}

td.myCell:hover {background-color:#FF9; color:#006; text-decoration:underline;}

One hopes that eventually MSIE will catch up on these and other standards that will make such things much easier to do.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

618 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