<SCRIPT>
var nMove0 = -10;
var nMove1 =   5;

function ChangeLayer(nLayer) {
var xLayer = document.layers["Layer" + nLayer]

  if (xLayer.visibility == "hide") {
     xLayer.visibility = "show"}
  else {
     xLayer.visibility = "hide"}
}

function moveLayer() {
var xLayer ;

  xLayer = document.layers["Layer1"];
  if (xLayer.left < 10 || xLayer.left > 500){
     nMove0 *= -1}
  xLayer.left += nMove0;

  xLayer = document.layers["Layer2"];
  if (xLayer.top < 10 || xLayer.top > 400){
     nMove1 *= -1}
  xLayer.top += nMove1;

  setTimeout("moveLayer()", 10);
  return;
}
</SCRIPT>

<FORM>
 <INPUT type=checkbox value=Layer1 checked onClick=ChangeLayer(1)>Show layer 1<BR>
 <INPUT type=checkbox value=Layer2 checked onClick=ChangeLayer(2)>Show layer 2<BR>
 <INPUT type=checkbox value=Layer3 checked onClick=ChangeLayer(3)>Show layer 3
 <P>
 <INPUT type=button value="Animate layers" OnClick="moveLayer(); return false;">
</FORM>

<LAYER bgcolor="#FFE0E0" top=200 left=250 name="Layer1" z-index=1>
<H1>Layer number 1</H1>
</LAYER>

<LAYER bgcolor="#E0FFE0" top=225 left=275 name="Layer2" z-index=3 background=IMG1.jpg>
<H1><FONT color=yellow>Layer number 2</FONT></H1>
<A href=LAYER2.html style="color: #D0D0FF">Source of this example</A>
</LAYER>

<LAYER bgcolor="#E0E0FF" top=150 left=300 name="Layer3" z-index=2  width=300 height=250>
<H1><FONT color=green>Layer number 3</FONT></H1>
</LAYER>
<P>