Contact Forked Web Tools
 Password Troubles?
 Advertise On FWT
User Name  Password 
Knowledge Center 
Home Page Software Center Knowledge Center Control Panel
50+ Programming Examples
Learn The Basics Of Web Programming
 Changing Background Colors
 Event Triggering With onLoad
 Disabling The Right Click
 DOM Driven Color Changing
 Switching Images
 innerHTML Attribute Access
 Change With innerHTML
 Changing Positions
 Change Position With onMouseMove
 Change Text Position
 Interactivity Skills
 Type-writing A Message
 Auto-changing Text Size
 Making Text Scroll
 Blinking Text
 Simple Form Authentication
 Change Background Color Of An INPUT
 Change Text Color Of An INPUT
 Change Background Image Of An INPUT
 Select All Checkboxes
 Select Color Of The Submit Button
 Change Text Color Of A Submit Button
 Insert Background Image To A Button
 Change Color Of Drop Down List
 Change Text Color Of A Drop Down List
 Change Color Of A TEXTAREA
 Change The Text Color Of A TEXTAREA
 Insert An Image Into A TEXTAREA
 Change The Size Of An Image
 Change The Source Of An Image
 Change The Position Of An Image
 Change The Background Image
 Moving Images Around The Page
 Drag & Drop An Image
 A Simple Image Viewer
 A Shaking Image
 A Digital Clock
 Drop Down List Link
 Top Drop Down Menu
 Always On Top Menu
 Inset Border Buttons
 A Description Generating Menu
 An Image Generating Menu
 A Horizontal Sliding Menu
 A Click Horizontal Sliding Menu
 Returning Cursor Co-ordinates
 Making Text Follow The Cursor
 Attaching An Image To The Cursor
Change Background Color

The following chunk shows how to make changes to the background color of a few table elements. In this example, the action is applied only to the TD element of the table that it is declared within. You can apply this method to any page element that DOM allows access to, including making document-wide changes through altering the values of attributes of the BODY tag.

These change methods can be used in one page element or in sweeping changes you can accomplish such as through the use of CSS rules. Simply alter the DOM statement stated in the JavaScript within the script tags given in the head of the document accordingly.


<script type="text/javascript">
function bgChange(bg)



<b>Mouse over the squares and the background color will change</b>

<table width="300" height="100">
<td onmouseover="bgChange('red')"
<td onmouseover="bgChange('blue')"
<td onmouseover="bgChange('green')"


Some things that you might want to play around with are changing which events fire the changes stated in the DOM statement, what properties are altered, and if you want to go a bit further and assign a variable loaded with information that is decided upon by other functions such as according to stored user preference.

To do this, change from using a literal value as the argument passed to the bgChange() function. For example, use a variable name instead of the word “green” – the actual color to be applied can be decided upon in another function and is contained as the data of the variable. You may use named colors, hex colors, or RGB colors as the method of defining what color is to be applied.