Solved

OnMouseOver to change both background and test of a table row

Posted on 2003-11-06
4
1,939 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 50 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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

729 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