Husky Heaven 3

  <script type="text/javascript" src="Tween.js"></script>
  <script type="text/javascript" src="OpacityTween.js"></script> 
  <script type="text/javascript">
  
  function doSequence()
  {
  	
	setTimeout('two()', 5000);
	setTimeout('three()',10000);
 
  } 
  
  function two()
  {
   var i = document.getElementById("one");
   i.style.display = "none";
   var j = document.getElementById("two");
   j.style.display = "block";
  }
  
  function three()
  {
   var i = document.getElementById("two");
   i.style.display = "none";
   var j = document.getElementById("three");
   j.style.display = "block";
  }  
  
  function moveSmiley1()
  {
  	var i = document.getElementById("smiley1");
	var t = new OpacityTween(i, Tween.bounceEaseOut, 100, 0, 3);
	t.start();    
  }
  
  function moveSmiley2()
  {
  	var i = document.getElementById("smiley2");
	var t = new OpacityTween(i, Tween.bounceEaseOut, 100, 0, 3);
	t.start();    
  }
  
  function moveSmiley3()
  {
 	var i = document.getElementById("smiley3");
	var t = new OpacityTween(i, Tween.bounceEaseOut, 100, 0, 3); 
	t.start();    
  }
  
  
  </script>
  
</head>
<body onLoad="doSequence()">

<div id="one" style="height: 300px; width: 600px; background-color: red;display: block">
	<img src="smileyFace.jpg" id="smiley1" style="filter:Opacity(100)">
	<input type="button" value="Fade Smiley 1" onClick="moveSmiley1()"> 
</div>
<div id="two" style="height: 300px; width: 600px; background-color: yellow;display: none">
	<img src="smileyFace.jpg" id="smiley2" style="filter:Opacity(100)"> 
	<input type="button" value="Fade Smiley 2" onClick="moveSmiley2()">
</div>
<div id="three" style="height: 300px; width: 600px; background-color: blue;display: none">
	<img src="smileyFace.jpg" id="smiley3" style="filter:Opacity(100)"> 
	<input type="button" value="Fade Smiley 3" onClick="moveSmiley3()">
</div>