Menu
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” “
<html xmlns=”
<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>