function placement(){

document.all.table1.style.posLeft=300;
document.all.table1.style.posTop=-110;
 
document.all.table2.style.posTop=52; 
document.all.table2.style.posLeft=640;
 
document.all.table3.style.posTop=500; 
document.all.table3.style.posLeft=200;
 
document.all.table4.style.posTop=52;
document.all.table4.style.posLeft=-150;

document.all.table5.style.posTop=0;
document.all.table5.style.posLeft=-110;

document.all.table6.style.posTop=52;
document.all.table6.style.posLeft=100;

setTimeout("move1()",1000) 
}

function move1() { 
document.table1.style.posTop += 2; 
if (document.table1.style.posTop <= 50)
{ setTimeout("move1()", 20); } 
else { setTimeout("move2()", 200); }
}

function move2() { 
document.table2.style.posLeft -= 10; 
if (document.table2.style.posLeft > 400) { 
setTimeout("move2()", 20); } 
else { setTimeout("move3()", 400); } 
}

function move3() { 
document.table3.style.posTop -= 6; 
if (document.table3.style.posTop > 155) { 
setTimeout("move3()", 20); } 
else { setTimeout("move4()", 600); } 
}

function move4() { 
document.table4.style.posLeft += 10; 
if (document.table4.style.posLeft <= 190) { 
setTimeout("move4()", 20); } 
else { setTimeout("move5()", 800); }

}

//begin table 5 journey
//this is the one that moves in several directions

function move5() { 
document.table5.style.posLeft += 5;
 
if (document.table5.style.posLeft <= 230) { 
setTimeout("move5()", 20); } 
else { setTimeout("move6()", 0); }

}

function move6() { 
document.table5.style.posLeft -= 2;
document.table5.style.posTop += 2;
 
if (document.table5.style.posTop < 135) { 
setTimeout("move6()", 20); } 
else { setTimeout("move7()", 0); }

}

function move7() { 
document.table5.style.posTop -= 2;
if (document.table5.style.posTop > 53) { 
setTimeout("move7()", 20); } 
else { setTimeout("move8()", 500); }

}

//table 5 has finished moving and now the red table6 moves offscreen

function move8() { 
document.table6.style.posLeft -= 4;
if (document.table6.style.posLeft > -410) { 
setTimeout("move8()", 20); }

}

</script>

<noframes><br><br>Js alert.. please reload</noframes>
</div>

<div id="table1">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#222222" transparency="40">
<tr><td width="100" height="100">
 DHTML</td></tr></table>
</div>

<div id="table2">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#222222" transparency="40">
<tr><td width="100" height="100" align="center">
<a href="javascript:void()"  onClick="placement()"> again</a></td></tr></table>
</div>

Back to 7. Now some DHTML again