dont panic
<html><head>
<title>My Dynamic Slide Show</title>
</head>
<body bgcolor="color" text="color" hspace=0 vspace=0 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 C & P any coding shown, using the Find Key, but be specfic as all of the text is layered.
As an example,
function may not work but function move2 will.
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. Use the hspace=0 and vspace=0 attributes in this tag to take full advantage of the Msn Tv screen size of 560x383 pixels.

We are now going to set up this slide show using an introduction, 3 slides 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:560;height:383;}
#intro{position:absolute;top:20;left:20;width:520;height:343;}
#slide1{position:absolute;top:20;left:20;width:520;height:343;}
#slide2{position:absolute;top:20;left:20;width:520;height:343;}
#slide3{position:absolute;top:20;left:20;width:520;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;}
#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 and your intro 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" ></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;}
#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 language="JavaScript">
<!--//
function init(){
document.all.frame.style.posTop=-400;
document.all.intro.style.posTop=-400;
document.all.slide1.style.posTop=-400;
document.all.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>
the prof
vspacer
copyrite 2001 by The Professor