Hey guys, I'm somewhat new to javascript and I am working on a site and need it to fade from the main picture to a picture behind it after a few seconds of the page loading and then have it fade the top image back in. Here is my code currently but I can't get it to work so help me out please.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" href="favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css" /><script language="javascript">

var element1 = document.getElementById("frontImage");
var element2 = document.getElementById("backImage");

function fadeOut() {
for(i=0; i<1; i+=.001) {
element1.style.opacity = (1-i);
element2.style.opacity = i;
}
}

function fadeIn() {
for(i=0; i<1; i+=.001) {
element1.style.opacity = i;
element2.style.opacity = (1-i);
}
}

function showButton() {
setTimeout(fadeOut(), 5000);
setTimeout(fadeIn(), 2000);
}

</script>
</head>
<body onLoad="showButton()">
<div class="holder">
<div class="header">
<a href="index.php"><img src="images/title.png" /></a>
</div>
<div class="content">
<div class="mainImage">
<img id="frontImage" src="images/img1.jpg" style="opacity: 1;" />
<img id="backImage" src="images/img2.jpg" style="opacity: 0;" />
<a href="about.php"><div class="mainButton"></div></a>
<a href="secretLogin.php"><div class="myButton"></div></a>
</div>

</div> <!-- close content -->
</div> <!-- close holder -->
</body>
</html>