Home / code / javascript

Layers in Javascript

A layer is a section of a HTML-page. These section can be placed on a special position. There are several sections per page possible. Each section can be shown, hidden, moved or manipulated independent from the other sections. With layers you can make animations and dynamic pages.

Layers works Netscape Navigator/Communicator 4.0 and up.

Example:

<HTML>
<HEAD>
  <TITLE>Layers</TITLE>
</HEAD>
<BODY>
  <LAYER top=50 left=100>
	<FONT size=6 color="red">Layer 1</FONT>
  </LAYER>
  <LAYER top=56 left=150>
	<FONT size=6 color="aqua">Layer 2</FONT>
  </LAYER>
  <LAYER top=60 left=200>
	<FONT size=6 color="green">Layer 3</FONT>
  </LAYER>
</BODY>
</HTML>

Layers and javascript

Example on moving layers:

<HTML>
<HEAD>
<TITLE>Layers</TITLE>
<SCRIPT language="JavaScript">
  var pos=0;
  var toRight = true;
  function move()
  {
	if (pos<0) toright=true;
	if (pos>140) toright=false;
	if (toRight)
	  pos++;
	else
	  pos--;
	document.layers["pic"].left=pos;
	document.layers["text"].top=pos;
  }
</SCRIPT>
</HEAD>
<BODY bgcolor=black onLoad="setIneterval('move()',10)">

<LAYER name="pic">
  <img src="Hillary.gif">
</LAYER>
<LAYER name="text">
  <a href="http://www.whitehouse.gov">
	<FONT size=+4 color=white>Hallo Hillary!</FONT>
  </A>
</LAYER>

</BODY>
</HTML>

 

TOP

Latest script:

 

Books: