Data cell light up effect on mouse rollover

1

Hi,

Do any of you guys know what language I need to use to make each content cell change colour when a mouse rollovers it?

For this site, http://individual.utoronto.ca/ckcj/fmm/fmm.htm notice how there’s content under each header? How would I make the background colour change when I rollover the text with my mouse cursor?

Thanks in advance.

2

What language? Thats Java Script, but you can do it with CSS too.

3

Yep, CSS is the way to go here.

4

Here’s an example.

First, you need a style definition for what you cant to have happen when you rollover. Here, I just made the background red.

<style type="text/css">
.hvbg {
	background-color:#FF0000;
}
</style>

Next, you need to define in your table cell what happens on rollover and rollout. Here, when you rollover, the table row style is set to what we defined above, and on rollout reverts to the default style.

<table width="400">
<tr onmouseover="this.className='hvbg';" onmouseout="this.className='';">
<td>Stuff goes here</td><td>More stuff goes here</td>
</tr>
</table>

Here is a similiar example, except here this is only applied to the table cell rather than the whole row.

<table width="400">
<tr>
<td onmouseover="this.className='hvbg';" onmouseout="this.className='';">Stuff goes here</td><td>More stuff goes here</td>
</tr>
</table>

Hope it helps! :beer: