I created a simple page to get a good understanding of using onMouseover and onMouseout.

When hovering the mouse over any of the images and then moving them away, it does work as it should (the background color of the buttons change color and then change back). However, when the page initially loads, the background color of the buttons is not blue eventhough I do have it defined in my code. I viewed the page both in Firefox and IE. It's not until you hover the mouse over one of the images and then move it away that the background color changes to blue. Why is not blue when the page initially loads?

http://goken68.brinkster.net/RolloverEffects.html

Code:
<html>
<head>
<script type="text/javascript" language="javascript"> 
 
contactImage = new Image();
    contactImage.src = 'americanpride.jpg';

contactImage2 = new Image();
    contactImage2.src = 'baldeagle.jpg';

contactImage3 = new Image();
    contactImage3.src = 'ProudToBeAmerican.jpg';

    function loadImage()
    {
        document.getElementById('imgContact').src = contactImage.src;
	document.getElementById('imgContact2').src = contactImage2.src;
	document.getElementById('imgContact3').src = contactImage3.src;
    }

    function changeIt()
     {
	first = document.getElementById('Button1');
	first.style.backgroundColor="green";
     }
 
function changeBack()
     {
	first = document.getElementById('Button1');
	first.style.backgroundColor="blue";
     }

function changeIt2()
     {
	second = document.getElementById('Button2');
	second.style.backgroundColor="red";
     }
 
function changeBack2()
     {
	second = document.getElementById('Button2');
	second.style.backgroundColor="blue";
     }

function changeIt3()
     {
	third = document.getElementById('Button3');
	third.style.backgroundColor="orange";
     }
 
function changeBack3()
     {
	third = document.getElementById('Button3');
	third.style.backgroundColor="blue";
     }
 
 
 
</script>
 
</head>

<body onload="loadImage()">

 <img src="americanflag.jpg" id="imgContact" onMouseOver="changeIt()" onMouseOut="changeBack()"/><br /><br />

 <input type="button" value="Button1" id="Button1" color="#ffffff" backgroundColor="blue"><br /><br />


 <img src="americanflag2.jpg" id="imgContact2" onMouseOver="changeIt2()" onMouseOut="changeBack2()" /><br /><br />

<input type="button" value="Button2" id="Button2" color="#ffffff" backgroundColor="blue"><br /><br />


<img src="americanflag3.jpg" id="imgContact3" onMouseOver="changeIt3()" onMouseOut="changeBack3()" /><br /><br />

<input type="button" value="Button3" id="Button3" color="#ffffff" backgroundColor="blue">


</body>
</html>