?
Solved

OnMouseOver to change both background and test of a table row

Posted on 2003-11-06
4
Medium Priority
?
1,946 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
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

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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).
Suggested Courses

601 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