1 reply [Last post]
botter
Offline
newbie
Last seen: 5 years 28 weeks ago
Timezone: GMT-8
Joined: 2008-12-07
Posts: 6
Points: 0

This may beyond the scope of this forum, but I was hoping that someone could help me with an image transition script. I'm new to building websites and have never used Javascript before. What I'm looking to do is cycle through three images on several pages. I'm looking for each image to stay on the screen for about 5-8 seconds and then to smoothly transition to the next image. One of the pages that I'm looking to do this is on is at the following link http://jasonmclennan.com/draft/speak.html You'll notice on this page that I've already tried to implement a script, and messed up the image formatting, but I can't get the script to work correctly. Any help would be greatly appreciated!

Oh, and CSS and the HTML for that page are below, in that order.

@charset "UTF-8";
/* CSS Document */
 
<style type="text/css>
 
#wrap {
background:#333333
}
 
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-style: lighter;
	color: #626366;
	line-height: 1.3;
	background: #555555;
	}
 
#container {
background:#FFFFFF;
width: 1000px;
margin: 0 auto;
}
 
#container2 {
background-image: url(images/home_greendirt_1.jpg);
background-repeat: no-repeat;
width: 1000px;
height: 620px;
margin: 0 auto;
}
 
 
#header {
height: 136px;
padding: 0px 0px 10px 25px;
clear: both;
}
 
 
#images
{
float: left;
width: 300px;
padding: 20px 0px 0px 25px;
clear: both;
}
 
#imagesfade
{
float: left;
width: 300px;
padding: 20px 0px 0px 25px;
clear: both;
}
 
#main
{ float: left;
width: 310px;
padding: 10px 10px 0px 20px;
}
 
#main2
{ float: left;
width: 640px;
padding: 10px 10px 0px 20px;}
 
#list
{ float: left;
width: 310px;
padding: 10px 05px 0px 10px;
list-style-type: none;
text-align: left; 
 
}
 
#footer {
clear: both;
padding: 0px 5px 0px 0px;
width: 1000 px;
}
 
#credit {
clear: both;
color: #FFFFFF;
font-size: 9px;
width: 1000px;
height: 40px;
margin: 0 auto;
}
 
.fade-box {
float: left;
width: 300px;
height: 253px;
padding: 20px 0px 0px 25px;
clear: both	
			}
 
 
			#box-1 {
 
			}
			#box-2 {
 
			}
			#box-3 {
 
			}
 
 
 
 
ul#links {
list-style: none;
margin: 0;
padding: 0px 0px 0px 320px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: none;
text-align: left; 
}
 
ul#links a:hover {
color:#afbd20;
text-decoration: underline;
}
 
ul#links a {
color:#afbd20;
line-height: 1.5;
text-decoration: none;
}
 
 
ul#nav {
list-style: none;
margin: 0;
padding-top: 20px;
padding-botton: 0px;
padding-left: 315px;
}
 
ul#nav li {
float: left;
margin: 0 4px;
display: block;
width: auto;
height: 28px;
line-height: 28px;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
text-align: center; 
}
 
ul#nav li a {
color: #333333;
text-decoration: none
}
 
ul#navh {
list-style: none;
margin: 0;
padding-top: 20px;
padding-botton: 0px;
padding-left: 315px;
}
 
ul#navh li {
float: left;
margin: 0 4px;
display: block;
width: auto;
height: 28px;
line-height: 28px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
text-align: center; 
}
 
ul#navh li a {
color: #ffffff;
text-decoration: none
}
 
ul#list {
list-style-type: disc;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-transform: none;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-style: lighter;
	color: #626366;
	line-height: 1.3;
}
 
body#biography a#biography,
body#write a#write,
body#speak a#speak,
body#create a#create,
body#consult a#consult,
body#contact a#contact
{
color: #afbd20;
}
 
a:link {
color: #afbd20;
text-decoration: none;
}
 
a:visited {
color: #afbd20;
text-decoration: none;
}

<!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>
<link rel="stylesheet" href="main2.css" type="text/css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jason F. McLennan- Speak</title>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
 
<style type="text/css">
<!--
.style2 {font-size: 11px; }
.style3 {font-size: 11pt}
-->
</style>
<script language="javascript">
 
			// this array consists of the id attributes of the divs we wish to alternate between
			var divs_to_fade = new Array('box-1', 'box-2', 'box-3');
 
			// the starting index in the above array.  It should be set to the value of the div which doesn't have the CSS Display property set to "none"
			var i = 0;
 
			// the number of milliseconds between swaps.  Default is five seconds.
			var wait = 5000;
 
			// the function that performs the fade
			function swapFade() {
				Effect.Fade(divs_to_fade[i], { duration:1, from:1.0, to:0.0 });
				i++;
				if (i == 3) i = 0;
				Effect.Appear(divs_to_fade[i], { duration:1, from:0.0, to:1.0 });
			}
 
			// the onload event handler that starts the fading.
			function startPage() {
				setInterval('swapFade()',wait);
			}
 
		</script>
 
 
</head>
 
<body id="speak">
<div id="container">
 
<div id="header">
 
 <p><a href="index.html"><img src="images/jfm_banner.jpg" alt="Jason F. McLennan" width="292" height="134" hspace="0" border="0" align="left" /></a></p>
 
<ul id="nav">
  		<li><a id="biography"; href="biography.html">Biography</a></li>
        <li> / </li>
      <li> <a id="write"; href="write.html">Write</a></li>
        <li> / </li>
      <li> <a id="speak"; href="speak.html">Speak</a></li>
      <li> / </li>
      <li> <a id="create"; href="create.html">Create</a></li>
      <li> / </li>
      <li><a id="consult"; href="consult.html"> Consult</a></li>
      <li> / </li>
        <li> <a id="contact"; href="contact.html">Contact</a></li>
  </ul>
  <p>&nbsp;</p>
 <ul id="links">
 <li> <a href="speaker_invitation.doc">Speaker Form</a></li>
 <li><a href="selected_presentations.html"> Recent Selected Presentations</a></li>
 <li><a href="testimonials.html">Testimonials</a></li>
 </ul>
</div>
 
 
 
<div id= "imagesfade" >
<div class="fade-box" id="box-1">
<img src="images/mclennan_speak1.jpg" alt="Jason F. McLennan" width="294" height="253" hspace="0" border="0" align="left" /></a></p>
	</div>
				<div class="fade-box" id="box-2" style="display: none;">
                <img src="images/mclennan_speak2.jpg" alt="Jason F. McLennan" width="294" height="253" hspace="0" border="0" align="left" /></a></p>
				</div>
				<div class="fade-box" id="box-3" style="display: none;">
                <img src="images/mclennan_speak3.jpg" alt="Jason F. McLennan" width="294" height="253" hspace="0" border="0" align="left" /></a></p>
				</div>
 
</div>
 
 
  <div id="main">
 
    <p class="style2">Jason F. McLennan is one of the most sought after keynote speakers in the North American Green Building scene – helping inspire and educate several thousand individuals each year at venues and conferences around the continent.  He is considered one of the most engaging and thoughtful presenters addressing a wide array of topics and diverse audiences including architects, engineers, developers, builders and other corporate clients.  In addition to dozens of presentations, Jason has made numerous radio appearances at stations around North America. <br />
      <br />
    If you are interested in inviting Jason to speak to your organization or at an event, please complete this <a href="speaker_invitation.doc"><strong>Speaker Invitation Form</strong></a>.</p>
  </div>
 
<div id="list">
<p><strong>Past Speaking Topics Include
 </strong>
<ul id="list">
 <li class="style2">An Introduction to Green Building and Sustainable Design</li>
 <li class="style2">The Future of Architecture and Design - The Living Building Challenge</li>
 <li class="style2">Sustainable Living/Sustainable Lifestyles</li>
 <li class="style2">Personal Change and Transformation</li>
 <li class="style2">Renweable Energy and the Future of Energy</li>
 <li class="style2">The Ethical Basis for Green Design</li>
 <li class="style2">Sustainable Communities- Visions for the Future</li>
 </ul>
  </div>
<div id="footer">
  <table width="800" border="0" cellpadding="20
  ">
    <tr>
      <td><div align="center"><a href="http://www.cascadiagbc.org/"><img src="images/cascadia.jpg" alt="Cascadia Region Green Buildign Council" width="125" height="113" border="0" /></a><br />
      </div></td>
      <td><div align="center"><a href="http://www.cascadiagbc.org/lbc"><img src="images/lbc.jpg" alt="Living Buidling Challenge" width="125" height="113" border="0" /></a><br />
      </div></td>
      <td><div align="center"><a href="http://www.pharoslens.net/"><img src="images/pharos.jpg" alt="Pharos" width="125" height="113" border="0" /></a><br />
      </div></td>
      <td><div align="center"><a href="http://www.ecotonedesign.com/"><img src="images/ecotone.jpg" alt="Ecotone" width="125" height="113" border="0" /></a><br />
      </div></td>
      <td><div align="center"><img src="images/zugenruhe.jpg" alt="zugenruhe" width="125" height="114" /></div></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>
</div>
<div id="credit">
  <p>Copyright &copy; 2008-2009 Jason F. McLennan<br />
  design by <a href="http://www.softfirmstudios.net/">softfirm</a><br />
  </p>
</div>
</body>
</html>

Tags:
Triumph (not verified)
Anonymous's picture
Guru

http://plugins.jquery.com/pro