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.

Advertisement

User Comments: 3

 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.