!!! Listing 1

<LAYER NAME="ausschnitt" Z-INDEX=20 TOP=0   LEFT=0  width=410 CLIP="510,363">
  <LAYER NAME="text"                TOP=363 LEFT=50 width=410 CLIP="500,1000">
  <TABLE bgColor=white width=410>
  <TR><TD align=center><H1>Layers Demonstration</H1>
  <TR><TD align=center><p>Dieses Beispiel veranschaulicht ein neues Feature 
	des Navigators 4, genannt Layers.</p>
  <!-- hier stehen weitere Tabellenzeilen -->
  </TABLE>
  </LAYER>
</LAYER>

!!! Ende Listing 1

!!! Listing 2

/* --------------------------------------------------------
// function scrollText()
// bewegt den erläuternden Text durch das Bild
// --------------------------------------------------------*/
function scrollText(start)
{ // falls start==true beginnt die Animation von vorne
  clearTimeout(TIMERID);
  var delta = 1;               // pixel pro schritt
  var text = document.layers["ausschnitt"].layers["text"];
  if (start)
        text.moveTo(50,363);   // Ausgangsposition
  if (text.top > -1000) 
  {
        text.offset(0,-delta); // verschieben um -delta Pixel
        var delayed_call = "scrollText(false)";
        TIMERID = setTimeout(delayed_call,50);
		// 50 ms Verzögerung
  }
  else
        text.moveTo(50,363);   // Ausgangsposition
}

!!! Ende Listing 2

!!! Listing 3

<LAYER NAME="karte" 	
       Z-INDEX=0 	
       TOP=0 LEFT=0 WIDTH=510>
 <IMG SRC="demap-de.gif"><BR>
 <FORM>
  <TABLE><TR>
   <TD><INPUT TYPE=CHECKBOX 
              NAME=berlin 
              onClick="update(this)">Berlin

   <!-- noch mehr Checkboxen --->

   <TD><INPUT TYPE=CHECKBOX 
              NAME=nrw 
              onClick="update(this)">Nordrhein-Westfalen
  </TABLE>
 </FORM>
</LAYER>

<LAYER NAME="berlin"	
       Z-INDEX=19 	
       clip="0,0,510,363" 
       TOP=0 LEFT=-515 WIDTH=510>
  <IMG SRC="demap-b.gif">
</LAYER>

<!-- weitere Layer mit absteigendem Z-INDEX-Wert -->

<LAYER NAME="nrw" 	
       Z-INDEX=4 	
       clip="0,0,510,363" 
       TOP=0 LEFT=-515 WIDTH=510>
  <IMG SRC="demap-nw.gif">
</LAYER>

!!! Ende Listing 3

!!!Listing 4

/* -----------------------------------------------------------------
// function update()
// zeigt oder versteckt einen Layer, abhängig vom Status der
// korrespondierenden Checkbox
// -----------------------------------------------------------------*/
function update(land)
{
    if (land.checked)
	scrollTo(land.name,0);		// show layer
    else
	scrollTo(land.name,-515);	// hide layer
}

/* -----------------------------------------------------------------
// function scrollTo()
// verschiebt einen Layer an eine gegebene xpos
// -----------------------------------------------------------------*/
function scrollTo(l_name,xpos)
{
  var l_obj 	= document.layers[l_name];	// layer-object

  if (Math.abs(xpos-l_obj.left) > 0)
    var richtung 	=  (xpos-l_obj.left) / Math.abs(xpos-l_obj.left)
				// +1 = nach rechts, -1 = nach links
  else				// else bedeutet: layer ist an Position 0
    var richtung = -1;  	// also nach links hinausschieben

  var delta = 5;		// pixel pro schritt (schrittweite)
  while (l_obj.left != xpos)
	l_obj.offset(richtung*Math.min(delta,Math.abs(l_obj.left-xpos)),0);

}

!!! Ende Listing 4