MrSandman's DHTML

~Welcome to the world of DHTML~
~Dynamic hyper text markup language~

It's a mixture of javascript,html,and css all blended together.
CSS is short for cascading style sheets.
You start out with a blank page at your homepage server then start
adding the code onto the page by copy and pasting it.
This page has the code in parts so you
can install them one part at a time.
This is so you can get a little more knowlege
of what the different parts do and how to
control the image placement and what to change.
For the people that just can't wait i do have the
whole code way down at the bottom of this page.
Here is a printable page of instructions Here.
Be sure to play with the numbers so you can get the feel of what happens.
I played with one set of numbers at a time just to see where one item ended up.
Don't give up cause it will get easier as you play with the code and if you get all turned around just come grab the code again.

MrSand41@aol.com

Back to MrSands Place

~Part 1~
This will be the top part of your page.
This should be at the very top of your page.
It's the opening <<>HTML>,<<>HEAD>,and the TITLE tags.
If you know what the page title is you may install the title now before you copy the code.
The title will show up in the status bar of the page.

~Part 2~
This is the part of the script that tells the image
or text to start from these locations.
Which mostly means up off the top of the screen.
You shouldn't have to mess with these right now.
I have the values set for this tutorial.

~Part 3~
Here is the part of the script that tells the image
when and where to move as well as how fast.

Looking at the example below the following adjustments
can be made.
The 275 tells the image where it will end up as far as height.
The higher the number the lower the image/text.

The =5 would change the speed the image/textwould travel.
The higher the number the faster the movment.
This code example here below would move the number 1 image/text.

EXAMPLE:
function move1() {
document.one.style.posTop += 5;
if (document.one.style.posTop < 275) {
setTimeout("move1()", 50); }
else { setTimeout("move2()", 275); }
}

function move1() { 
document.one.style.posTop += 5; 
if (document.one.style.posTop < 141) { 
setTimeout("move1()", 50); } 
else { setTimeout("move2()", 275); } 
}

function move2() { 
document.two.style.posTop += 5; 
if (document.two.style.posTop < 141) { 
setTimeout("move2()", 50); } 
else { setTimeout("move3()", 275); } 
}

function move3() { 
document.three.style.posTop += 5; 
if (document.three.style.posTop < 141) { 
setTimeout("move3()", 50); } 
else { setTimeout("move4()", 275); } 
}

function move4() { 
document.four.style.posTop += 5; 
if (document.four.style.posTop < 141) { 
setTimeout("move4()", 50); } 
else { setTimeout("move5()", 275); } 
}

function move5() { 
document.five.style.posTop += 5; 
if (document.five.style.posTop < 141) { 
setTimeout("move5()", 50); } 
else { setTimeout("move6()", 275); } 
}

function move6() { 
document.six.style.posTop += 5; 
if (document.six.style.posTop < 95) { 
setTimeout("move6()", 50); }

}
</script>

~Part 4~
Besides having the closing <<>/HEAD> tag.
Here is the part of the code that tells the image/text
where to be as far as from side to side.
The higher the number the farther right the image/text
would be on your screen.
The number that would be changed is the 120 in the example below.

EXAMPLE:
#one { position:absolute; top:-275; left:50; }

~Part 5~
This is for the page background and text color.
There is also a small part that the script needs
to start the page in motion.
Here is the onload code that starts the page......
onLoad="init();move1();
Then below this is the music code to set your page to music
that compliments the page you are building.

~Part 6~
Ok this page will be attacked by the web bug
because thats the nature of the bug LOL.
So this is a java bug alert to let the public know
when the bug is around.

~Part 7~
Ok here is the last of the code and this
part is where you break the images up into bits.
Also the closing <<>/BODY> and <<>/HTML> is added here too.
Each of these (<<>div id="one"> <<>/div>) give each
piece a number so it will drop in at a desired time.
You would put the image/text
(<<>div id="one">IMAGE/TEXT HERE<<>/div>)
I took the liberty and put some words and a image
in the code below just to get you started.

Here is the whole code to copy and paste to a blank page.
This is for those who don't like running back and forth LOL.

<html>
<head>
<title>YOUR PAGE TITLE HERE</title>

function move1() { 
document.one.style.posTop += 5; 
if (document.one.style.posTop < 141) { 
setTimeout("move1()", 50); } 
else { setTimeout("move2()", 275); } 
}

function move2() { 
document.two.style.posTop += 5; 
if (document.two.style.posTop < 141) { 
setTimeout("move2()", 50); } 
else { setTimeout("move3()", 275); } 
}

function move3() { 
document.three.style.posTop += 5; 
if (document.three.style.posTop < 141) { 
setTimeout("move3()", 50); } 
else { setTimeout("move4()", 275); } 
}

function move4() { 
document.four.style.posTop += 5; 
if (document.four.style.posTop < 141) { 
setTimeout("move4()", 50); } 
else { setTimeout("move5()", 275); } 
}

function move5() { 
document.five.style.posTop += 5; 
if (document.five.style.posTop < 141) { 
setTimeout("move5()", 50); } 
else { setTimeout("move6()", 275); } 
}

function move6() { 
document.six.style.posTop += 5; 
if (document.six.style.posTop < 95) { 
setTimeout("move6()", 50); }

}
</script>

#one { position:absolute; top:-275; left:50; }

#two { position:absolute; top:-275; left:120; }

#three { position:absolute; top: -275; left: 160; }

#four { position:absolute; top:-275; left:230;}

#five { position:absolute; top:-275; left:260;}

#six { position:absolute; top:-275; left:300;}

</style>

</head>

<noframes><center><spacer type=block height=150><font color=red size=7>WebTV Bug!!<p>RELOAD PAGE</font></center></noframes>

<div id="one"> 
MrSand
</div>

<div id="three">
Showed
</div>

</body></html>