Javascript Change Background Colors

Javascript Change Background Colors

NOTE: If you copy and paste this code, watch out for spaces and line returns put in by the browser, like after the getElementById.

<body id=hey>

<a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make it Red!</a> ----
<a onMouseover=document.getElementById('hey').style.backgroundColor='#99FFCC'> Make it Sort of Green!!!</a>

-In our HTML body tag, we name our id attribute hey because we like short names.
-We create two links that use the Javascript onMouseover event handler.
---After the equals sign:
-----document - this page
-----getElementById - Javascript's built-in method that will get elements from our page.
-----In the parenthesis - we state that we will be working on the hey element of our page.
-----We then call the Javascript style object.
-----We then call the backgroundColor property of the style object.
-----We say make it red for the first sentence, and using a hexidecimal number with the pound symbol, make it "off green" for the second.

NOTES: We could have put the id=hey in a table tag and our table would change background colors, like so:

<table id=hey height=50><tr><td valign=top height=50>
<a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make it Red!</a> ----
<a onMouseover=document.getElementById('hey').style.backgroundColor='#99FFCC'> Make it Sort of Green!!!</a>
</td></tr></table>

Free Copy and Paste Javascript Code:

<body id=hey>

<a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make it Red!</a> ----
<a onMouseover=document.getElementById('hey').style.backgroundColor='#99FFCC'> Make it Sort of Green!!!</a>

Resources:
Javascript Change Fonts
Javascript Change Font Size
HTML paragraph tag
Javascript onMouseover
Javascript onClick
If, Else If, and Else in Javascript
Create a Function in Javascript
Call your Function in Javascript
Passing an Argument or Variable to a Javascript
Increment a Variable in Javascript