AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
Print This Page

You are here : Home - Resources - FAQ - Javascript Q9

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




Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]