[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

OnMouseOver to change both background and test of a table row

Posted on 2003-11-06
4
Medium Priority
?
1,944 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying 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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

872 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