JavaScript

Change Cell Color on Mouseover
Change Background Color
Break out of Frames
Change Cursor
Limit Input Text
Get Object By ID
Up/Down Buttons (Spinner)

Other sites

Image Editor
Top 10 web hosting reviews

Changing the color of a Table cell

It is simply amazing all the things you can do with JavaScript. Here is a quick example of how you can change the background color of the cell of a table when the user mouses over that cell.

Example Code
`<TD onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#009900'" bgColor=#009900> <A HREF="http://www.mysite.com">Click Here</A></TD>`

Here is an example of how this works.

Move the mouse over this box to see the color change.

Pretty nifty don't you think? JavaScript code like this is really handy when creating for example menus, you can change the color on mouseover and have a link in the cell. That way you avoid the extra cost of using images instead of text.

This technique can also be used with a mouse click.

Example Code
`<TD onMouseDown="this.bgColor='#00CC00'" onMouseUp="this.bgColor='#009900'" bgColor=#009900> <A HREF="http://www.mysite.com">Click Here</A></TD>`

Here is an example of how this works.

Click and hold the mouse button down to see the color change.

Instead of using the mouse up and down events, you could toggle the switch on a single mouse click.

Example Code
`<TD onClick="if(this.bgColor=='#009900'){this.bgColor='#00CC00'}else{this.bgColor='#009900'}" bgColor=#009900> <A HREF="http://www.mysite.com">Click Here</A></TD>`

Here is an example of how this works.

Click once, then click again to toggle the color.

Link back to this page

Copy and paste this HTML code into your page to link back to this very page:

Or just link to the WebCodingTech site:

And your link will look like this:

Inspired by stuff found at www.webcodingtech.com.

www.webcodingtech.com

Coding Technologies for the Web

Changing the color of a Table cell

Link back to this page

Thanks!