Combining css and javascripting

[masteryamaha]

I wrote some javascripting for a site navigation which simply uses a onmouseover to highlight a table cell. It is embedded in the head as follows:
<!-- This is the code in the head -->
<STYLE>
.cell_over { BACKGROUND-COLOR: #000080;
link: #c0c0c0;
vlink: #c0c0c0;}
.cell_out { BACKGROUND-COLOR: #c0c0c0;
link: #ff0000;}
.cell_over1 { BACKGROUND-COLOR: #000080;
link: #c0c0c0;
vlink: #c0c0c0;}
.cell_out1 { BACKGROUND-COLOR: #c0c0c0;
link: #ff0000;}
</STYLE>
and then in the cell element (td) i have:
onmouseover="this.className='cell_over';" onmouseout="this.className='cell_out';" bgcolor="#c0c0c0"

This method works but i would like to to put it in my .css, i put the classes listed in the head in the css and didnt change anything else (besides removing the classes from the head) and this did not work. I am wondering if this is the right method and i made a spelling error in my @import line or around there, or do i need to change the java in the td. Please Help!!!

 

[Vragabond]

There are no [tt]link[/tt] and [tt]vlink[/tt] properties in css. I suggest before you start making up css attributes you look at some css tutorial or referrence. For a start, this should do:

http://www.w3schools.com/css/

 

[BillyRayPreachersSon]

You should not need to change your code. It is most likely that either your CSS file contains errors (erroneous tags that should not be there, etc), or you are not linking it correctly (incorrect syntax or wrong path to file).

Posting your CSS and linking code would be helpful.

Dan


The answers you get are only as good as the information you give!

 

[ChrisHunt]

In any case, you should be able to get that kind of behaviour without javascript, using CSS's [tt]:hover[/tt] pseudo-class. Something like this:

td { background-color: #C0C0C0; }
td:hover { background-color: #000080; }

This should work just fine with modern browsers like Firefox. Unfortunately, IE doesn't apply :hover properties to anything but <a> elements. You can work round this by either...
[ul]
[li](if each <td> contains just an <a>)Use CSS to make the <a> tags [tt]display:block[/tt] and apply the rules above to them instead of the <td>s.
[/li]
[li]Use an IE "behaviour" file like the one at

http://www.xs4all.nl/~peterned/csshover.html

to make it behave properly.
[/li]
[/ul]

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd