JavaScript Tutorial
Change color of a cell onMouseOver onMouseOut
This little function will change the background color of a cell when the mouse is over or out.
<script type="text/javascript">
function bgr_color(obj, color) {
obj.style.backgroundColor=color
}
</script>
Using Named Colors:
<table width="500" border="1">
<tr>
<td width="150" bgcolor="White" onmouseover="bgr_color(this, 'Red')" onmouseout="bgr_color(this, 'White')"><p align="center">I will change to red when mouse is over.</p></td>
<td width="150" bgcolor="White" onmouseover="bgr_color(this, 'Green')" onmouseout="bgr_color(this, 'White')"><p align="center">I will change to green when the mouse is over.</p></td>
<td width="150" bgcolor="White" onmouseover="bgr_color(this, 'Blue')" onmouseout="bgr_color(this, 'White')"><p align="center">I will change to blue when the mouse is over.</p></td>
</tr>
</table>
Using the code of the color:
<table width="500" border="1">
<tr>
<td width="150" bgcolor="#FFFFFF" onmouseover="bgr_color(this, '#FF0000')" onmouseout="bgr_color(this, '#FFFFFF')"><p align="center">I will change to red when mouse is over.</p></td>
<td width="150" bgcolor="#FFFFFF" onmouseover="bgr_color(this, '#008000')" onmouseout="bgr_color(this, '#FFFFFF')"><p align="center">I will change to green when the mouse is over.</p></td>
<td width="150" bgcolor="#FFFFFF" onmouseover="bgr_color(this, '#0000FF')" onmouseout="bgr_color(this, '#FFFFFF')"><p align="center">I will change to blue when the mouse is over.</p></td>
</tr>
</table>
Change color effect on a Table row.
We can use the same technique on a row in a table.
Here add the onmouseover and the onmouseout on the tr tag.
<table width="500" border="1">
<tr bgcolor="#FFFFFF" onmouseover="bgr_color(this, '#FF0000')" onmouseout="bgr_color(this, '#FFFFFF')">
<td width="150"><p align="center">I will change to red when mouse is over.</p></td>
<td width="150"><p align="center">I will change to green when the mouse is over.</p></td>
<td width="150"><p align="center">I will change to blue when the mouse is over.</p></td>
</tr>
</table>
Change color effect on the whole Table.
Again use the same technique. This time add the onmouseover and the onmouseout on the TABLE tag.
<table width="500" border="1" bgcolor="#6699CC" onmouseover="bgr_color(this, '#008080')" onmouseout="bgr_color(this, '#6699CC')" id="table1">
<tr>
<td colspan="3"><p align="center">Hi, I'm a table</p></td>
</tr>
<tr>
<td><p align="center">With</p></td>
<td><p align="center">some</p></td>
<td><p align="center">cells!</p></td>
</tr>
</table>
Important: The onmouseover and onmouseover attribute of the TD tag is not supported in Netscape Navigator 6.0.
JavaScript Tutorial test
Change color of a cell onMouseOver onMouseOut
I will change to red when mouse is over. |
I will change to green when the mouse is over. |
I will change to blue when the mouse is over. |
I will change to red when mouse is over. |
I will change to green when the mouse is over. |
I will change to blue when the mouse is over. |
Hi, I’m a table |
||
With |
some |
cells! |
User Comments: 4
thanks baby
hey there , thanks for this little script :) it helped so much :)
simply super
u have done.
i want to change bgcolor of table row onmouseover by setting class attribute of <tr> in javascript function,how?
Ok, but...
It is ok, but how can you change the color of one cell when doing mouseover in a different cell?
change color of cell on mouseover/out
hey, your tutorial was right to the point and helped me out on a site i am developing, thanks a million.
