Home
|
Resources Home
|
Browser Upgrade
|
Directory
|
Add a Site
|
F-A-Q
|
Link To Us
|
News Headlines
|
Reg Ex Tester
|
RSS Directory
|
Site Index
|
Speed Tester
|
Window Test
|
You are here : Home - Resources - FAQ - Javascript Q9
Q9:How do I change the color of a table cell when the pointer passes over it?
A:This is a good one. What might appear complicated is faily simple to achieve.
Those of you familiar with javascript will know about onmouseover and onmouseout well that is all we use on the table cells changing.
Here's an example.
And here's the code that made it.
All you have to do is change the color values onmouseover="this.style.background='YOUR_COLOR';" when the mouse is moved over the cell
onmouseout="this.style.background='YOUR_COLOR';" when the mouse is moved out of the cell
Doesn't work in Netscape 4x but doesn't produce errors.
Tested and working in IE6, Opera6, Mozilla 1, Netscape 6
Doesn't cause any problems with validation.
back to faq
FAQ - Javascript Q9
Q9:How do I change the color of a table cell when the pointer passes over it?
A:This is a good one. What might appear complicated is faily simple to achieve.
Those of you familiar with javascript will know about onmouseover and onmouseout well that is all we use on the table cells changing.
Here's an example.
| This cell will turn red |
This cell will turn yellow |
| This cell will turn green |
This cell will turn blue |
And here's the code that made it.
<table border="1" cellpadding="4" cellspacing="0" width="300" align="center">
<tr>
<td onmouseover="this.style.background='red';" onmouseout="this.style.background='#ffffff';" align="center">This cell will turn<br>red</td>
<td onmouseover="this.style.background='yellow';" onmouseout="this.style.background='#ffffff';" align="center">This cell will turn<br>yellow</td>
</tr>
<tr>
<td onmouseover="this.style.background='green';" onmouseout="this.style.background='#ffffff';" align="center">This cell will turn<br>green</td>
<td onmouseover="this.style.background='blue';" onmouseout="this.style.background='#ffffff';" align="center">This cell will turn<br>blue</td>
</tr>
</table>
All you have to do is change the color values onmouseover="this.style.background='YOUR_COLOR';" when the mouse is moved over the cell
onmouseout="this.style.background='YOUR_COLOR';" when the mouse is moved out of the cell
Doesn't work in Netscape 4x but doesn't produce errors.
Tested and working in IE6, Opera6, Mozilla 1, Netscape 6
Doesn't cause any problems with validation.
back to faq
[
]
[
]
]
[]