Link to home
Start Free TrialLog in
Avatar of mskvarenina
mskvarenina

asked on

Changing text color in an HTML table

I am attempting to create a table that starts off with a light green background color and dark green text and when the mouse moves over a cell, I want to change the cell to dark green and the text to bright green.  What I can't seem to cause is the initial text to be green.  If I put a <font> tag directly after a <td> tag, the color will be green but it won't change on the mouseover event.  The cell changes but the text does not.

Below is my latest attempt...anyone know how to make this work?



<table border=1 bgcolor="66CC99" width=100% cellspacing=0 cellpadding=0
                                                               >
  <tr>
    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Home</td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Clinical</td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><font color="006633"><b>Financial</font></td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Operations</td>

    <td width=20% onMouseover="this.bgColor='339966',
      onMouseover=this.style.color='33FF99'"
      onMouseout ="this.bgColor='66CC99',
      onMouseout =this.style.color='006633'"><b>Administration</td>

  </tr>

</table>
Avatar of tewald
tewald
All you'd have to do is set the initial style of the cells.  See the <style> tag in the <head> section - this sets the color of all table cells to #339966 (or whatever you want).  Then your mouse events will overide the initial color value.

<html>
<head>
<title>Font Color</title>
<style type="text/css">
td {
     color: #339966;
}
</style>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" cellspacing="0" cellpadding="0">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Home</td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Clinical</td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><font color="006633"><b>Financial</font></td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Operations</td>

   <td width=20% onMouseover="this.bgColor='339966',
     onMouseover=this.style.color='33FF99'"
     onMouseout ="this.bgColor='66CC99',
     onMouseout =this.style.color='006633'"><b>Administration</td>

 </tr>
</table>
</body>
</html>
Avatar of mskvarenina
mskvarenina

ASKER

tewald:  I havn't worked with CSS yet, I've been doing HTML for about a month (18 year veteran programmer now moving to web development).  One question though...for this page I have 4 tables actually and the one shown is the only one I want to effect.  Sounds like your solution would 'override' the text color for each table?
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
put this in the head

<style>
   .class1 {background-color:#339966;color:#33ff99}
   .class2 {background-color:#66cc99;color:#006633}
</style>

Then do the table this way.

<table border=1 bgcolor="66CC99" width=100% cellspacing=0 cellpadding=0
                                                              >
 <tr>
   <td width=20% class='class2" onMouseover="this.className='class1'"
       onMouseout ="this.className='class2'"><b>Home</td>

   Just repeat the same thding for each cell

 </tr>

</table>


Cd&
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
BTW,

Does not work in Netscrap 4.x, because it does not support mouse events on cells

Cd&
Avatar of tewald
tewald
mskvarenina, you are correct.  By setting the style for a <td> tag (as I showed) you define the appearance for all <td> tags on the page.  You get around this by using the technique COBOLDinosaur demonstrated: class selectors.  CD's answer is the correct approach, but the following is just to help clarify how to use a class selector.

Instead of using td in the style, use a name that makes sense for what you're applying the style to.  The name must follow a "." as shown below.  Within the brackets you may list as many elements as you'd like, but each must be separated by a ";".

<head>
<style type="text/css">
.initialColor { color: #339966; }
</style>
</head>

Then, using one of your cells as an example, you apply the style using the following syntax:

<td class="initialColor" width=20%
 onMouseover="this.bgColor='339966',
 onMouseover=this.style.color='33FF99'"
 onMouseout ="this.bgColor='66CC99',
 onMouseout =this.style.color='006633'"><b>Home</td>

Using this approach let's you specify which style, if any, to apply to each <td> element.  You could setup different class selectors and apply them to just about any element on the page, not just <td>s.

tewald
Avatar of raizon
raizon
mskvarenina, the simplist way would be to follow the steps that COBOL layed out for you.
Avatar of Don Laucirica
Don Laucirica
Flag of United States of America image
ALCON,

I'll throw some points out there if someone can show code modifications for changing the text font color of hyperlinked text, using the code COBAL desplayed.

Good question mskvarenina, sorry for the intrude.

Don L.
Avatar of chromonium
chromonium
use .a { ... } would change all hyperlinks

sure it wouldnt matter?

just insert in href tag or <a>
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
Using a tag would only chane the link not the cell background... time to lock it... anyone object?

Cd&
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
Using a tag would only chane the link not the cell background... time to lock it... anyone object?

Cd&
Avatar of chromonium
chromonium
what do you mean... lock it??
Avatar of raizon
raizon
Lock it Cobol.  The question has been answered with code.
Avatar of chromonium
chromonium
yes I object
Avatar of chromonium
chromonium
use .a { ... } would change all hyperlinks

sure it wouldnt matter?

just insert in href tag or <a>
ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of chromonium
chromonium
yeah, using css will work regardless of the content, providing it exists
Avatar of chromonium
chromonium
why lock it???
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
>>> why lock it?

Because it is answered the questioner has not commented since Aug 10 when they got their answer and left.

lauciricad,

If you want use that technique for links set the styles this way:

<style>
  .class1 a {background-color:#339966;color:#33ff99}
  .class2 a {background-color:#66cc99;color:#006633}
</style>

Then put the link in a span with the class applied.


or just apply the class to the link.

Cd&
Avatar of mskvarenina
mskvarenina

ASKER

COBOLdinosaur, I didn't leave I was just out of town.  Your solution looks great...thanks for the help!
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
Glad to help thanks for the A. :^)

Cd&