spacer
don't panic
<html><head>
<title>My Dynamic Slide Show</title>
</head>
<body bgcolor="color" text="color" link="color" vlink="color" onLoad="init();move1()">
We are going to demonstrate how you can make a slide show using Dynamic HTML. This technique, while it may be new to you, is really quite easy to master. The steps, located on the bottom, will teach you how to make the init and move functions.
Allow a few seconds for each screen to display before changing or revisting each step. You can copy any screen coding shown, but be specific as some of the text is layered.
As an example, "Right Click"  "Select All" will copy more than the screen you are viewing. Set your browser zoom to 150% for larger screen. Just take your time and enjoy yourself. It is imperative that you have an understanding of Basic Css Coding before starting, as this will not be discussed here.
</body></html>
The first order of business is the <body> tag as this is where all the action begins.
<body onload="init();move1()"> with the style elements contained in an external css file
<link rel="stylesheet" href="your name.css" type="text/css"> located in the <HEAD> tag.
We are now going to set up this slide show using an introduction, 3 slides,Thunderstone nav bar

nav bar example

and a frame to display them in. Just add an additional slide element for each slide that you wish to display.

Next write your <style> tag like this
<style type="text/css">
#frame{position:absolute;top:0;left:0;width:760;height:383;}
 #nav{position:absolute;top:323;left:20;width:720;height:22;}
 #intro{position:absolute;top:20;left:20;width:720;height:343;}
 #slide1{position:absolute;top:20;left:20;width:720;height:343;}
 #slide2{position:absolute;top:20;left:20;width:720;height:343;}
#slide3{position:absolute;top:20;left:20;width:720;height:343;}
</style>
 The construction of the <div> tags will be discussed in steps 2 and 3.
<style type="text/css">
 #frame{position:absolute;top:0;left:0;width:560;height:383;}
 #nav{position:absolute;top:323;left:20;width:720;height:22;}
#intro{position:absolute;top:20;left:20;width:520;height:343;}
#slide1{position:absolute;top:20;left:20;width:520;height:343;}
</style>

The frame <div> is where the slides, intro and nav divions will be presented. Place a table inside this tag using the following parameters and adjust the colors to suit your preference.

 <div id="frame">
<table cellpadding=0 cellspacing=10 bgcolor="#000033" width=550 border=0><tr><td height=363 bgcolor="#000513" >Your content goes here</td></tr></table>
</div>

The intro and slide element parameters are set so that they will be displayed in the frame div. Only slide1 element is shown as they are all indentical. Your document, however will require an individual element for each slide.
<style type="text/css">
#intro{position:absolute;top:20;left:20;width:520;height:343;}
 #nav{position:absolute;top:323;left:20;width:720;height:22;}
 #slide1{position:absolute;top:20;left:20;width:520;height:343;}
 </style>

The intro and slide <div>'s are identical so only 1 is shown. Just copy this div, change the alignment of the <td> cell to <td align="center">, rename to slide1,slide2 and slide3 and your <div> tags are finished.
<div id="intro">
<table cellpadding=0 cellspacing=0 width=520 border=0><tr><td height=343>Your intro text or slide image</td></tr></table>
</div>

 The intro div is a very important element in your slide show. Not only does it introduce the show, but allows the music and images to load. For that reason it is best to use optimized images of less than 500x320 and set the delay for this div at about 20 secs.

Now, using Java Script, we are going to hide and display all of the <div>'s which will produce the same effect that you are now seeing.
<script type="text/JavaScript">
<!--//
function init(){
 document.getElementById("frame").style.posTop=-400;
document.getElementById("intro").style.posTop=-400;
document.getElementById("slide1").style.posTop=-400;
document.getElementById("slide2").style.posTop=-400;
document.all.slide3.style.posTop=-400;
}
function move1(){
document.frame.style.posTop+=10;
if (document.frame.style.posTop<0){
setTimeout("move1()",50);}
else { setTimeout("move2()",50);}
}
function move2(){
document.intro.style.posTop+=10;
if (document.intro.style.posTop<20){
setTimeout("move2()",50);}
else { setTimeout("move3()",2000);}
} 		The init() function intitially hides our <div>'s and the -400 value places them 400 pixels above the top of the document.

The move function moves them in the following manner.
posTop+=10;
The + moves the <div> down. 10 is the interval at which the <div> moves and was used to move the Nav Bar by varying this value.
style.posTop<0)
 The < also says down and 0 is the position it goes to.
setTimeout("move2()",50)
50 is the rate which the <div> moves.

setTimeout("move3()",2000)
2000 determines when the next move occurs.
function move3(){
document.intro.style.posTop-=10;
if (document.intro.style.posTop>-400){
setTimeout("move3()",50);}
else { setTimeout("move4()",50);}
}
function move4(){
document.slide1.style.posTop+=10;
if (document.slide1.style.posTop<20){
setTimeout("move4()",50);}
else { setTimeout("move5()",10000);}
}
function move5(){
document.slide1.style.posTop-=10;
if (document.slide1.style.posTop>-400){
setTimeout("move5()",50);}
else { setTimeout("move6()",50);}
} 		This setTimeout("move5()",10000) sets the time now that the slide will be viewed before changing.

An additional move function has now been added to the intro and slide <div>'s.
posTop-=10;
The - moves the <div> up and 10 is the rate.
style.posTop>-400)
 The > also says up and restores the <div> to the original -400 position.

This is required so that each <div> moves out and can be replaced by the next one.

The + < and - > symbols act in concert. They must be used in pairs.
function move6(){
document.slide2.style.posTop+=10;
if (document.slide2.style.posTop<20){
setTimeout("move6()",50);}
else { setTimeout("move7()",10000);}
}
function move7(){
document.slide2.style.posTop-=10;
if (document.slide2.style.posTop>-400){
setTimeout("move7()",50);}
else { setTimeout("move8()",50);}
}
function move8(){
 document.slide3.style.posTop+=10;
if (document.slide3.style.posTop<20){
setTimeout("move8()",50);}
}
//-->
</script> 		The last move function
function move8(){
does not require the
else { setTimeout element
as this is the end of the slide show.

This <div>, slide3, would be a good place though to provide your viewer with the option of viewing the show again or returning whence they came.

<a href="javascript:void(0)" onClick="history.go(0)">Text</a>

<a href="javascript:void(0)" onClick="history.go(-1)">Back</a>
spacer
the prof
copyrite 2001 by The Professor
spacer Valid HTML 4.01 Transitional
spacer
the prof
copyrite 2001 by The Professor
home spacer
step 1 step 2 step 3 step4 step 5 step 6 home reset