Help with javascript

**crlang** · 11-20-2012 10:31 AM

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> 
</div> 
</body>
</html>

**vwphillips** · 11-20-2012 11:22 AM

Code:

<!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" />
<style type="text/css">
/*<![CDATA[*/
.mainImage {
  position:relative;width:200px;height:150px;
}

.mainImage IMG{
  position:absolute;width:200px;height:150px;
}

/*]]>*/
</style>
</head>
<body>
<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="backImage" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img id="frontImage" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<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 -->
<script type="text/javascript">
/*<![CDATA[*/

function FadeOutIn(id,f,t,ms,hold){
 fade(document.getElementById(id),f,t,new Date(),ms,hold);
}

function fade(o,f,t,srt,mS,hold){
 var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
 if (isFinite(now)){
  o.style.filter='alpha(opacity='+now+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=now/100-.001;
 }
 if (ms<mS){
  setTimeout(function(){ fade(o,f,t,srt,mS,hold); },10);
 }
 else {
  if (t==0){
   setTimeout(function(){ fade(document.getElementById(o.id),t,f,new Date(),mS); },hold);
  }
 }
}

FadeOutIn('frontImage',100,0,1000,3000);

/*]]>*/
</script></body>
</html>

Thread: Help with javascript

Thread Tools

Display

Help with javascript

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions