Solved

OnMouseOver to change both background and test of a table row

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now