JavaScript - Verschieben von Seitenelementen

Das aufgelistete Beispiel demonstriert das Verschieben von Seitenelementen. Von der Benutzung von Layern rate ich an dieser Stelle dringend ab, da diese nur dem Netscape-Navigator bekannt sind. Stattdessen lassen sich div-tags bestens dazu gebrauchen, wenn man eine id definiert und im style-Bereich position:absolute definiert.
Allerdings ist die Benutzung nicht in allen Browsern gleich. Das sieht man am besten wenn man sich den Quelltext mal ansieht.

Beispiel ansehen

Querverweise zum Verständnis : [Einbindung in HTML] [Spezifikation Funktionen] [Objektreferenz all] [Objektreferenz style]

Im folgenden Quelltext sind wichtige Bereiche grün und Kommentare gelb markiert.
<html>

<head>
<title>
JavaScript - Beispiel
</title>

<script type="text/javascript"> <!-- Script-Bereich einleiten -->
<!--                           /* HTML-Kommentar fuer Browser ohne JavaScript */

var x=100,y=100;               /* globale Variablendeklaration */

function domove()
/* der Aufruf dieser Funktion verwirklicht die Verschiebung auf die
   Koordinaten-Variablen x und y */
{
  if (document.all)            /* wenn Microsoft-Modell */
  {
    document.all.mobilbox.style.left=x; /* x verschieben */
    document.all.mobilbox.style.top=y;  /* y verschieben */
  }
  else
  if (typeof(document.getElementById)=="function")
                               /* wenn Netscape 6.x */
  {
    document.getElementById("mobilbox").style.left=x; /* x verschieben */
    document.getElementById("mobilbox").style.top=y;  /* y verschieben */
  }
  else
  if (document.mobilbox)       /* wenn Netscape 4.x */
  {
    document.mobilbox.left=x;  /* x verschieben */
    document.mobilbox.top=y;   /* y verschieben */
  }
  else                         /* wenn keine Unterstuetzung */
    alert("Dein bloeder Browser kann das nicht machen.");
}

function moverel(xm,ym)
/* der Aufruf dieser Funktion verschiebt die Kiste relativ */
{
  x+=xm;                       /* neue x-Koordinate */
  y+=ym;                       /* neue y-Koordinate */
  domove();                    /* bewegen */
}

function moveabs(xn,yn)
/* der Aufruf dieser Funktion verschiebt die Kiste absolut */
{
  x=xn;                        /* neue x-Koordinate */
  y=yn;                        /* neue y-Koordinate */
  domove();                    /* bewegen */
}

//-->                          <!-- HTML-Kommentarende -->
</script>                      <!-- Script-Bereich beenden -->

</head>
<body onLoad="domove();">

<a href="move.html">Erkl&auml;rung</a>
  <!-- Link zurueck auf move.html -->

  <!-- Hier folgt die Definition der mobilen Kiste : --> 
<div name="mobilbox" id="mobilbox"
     style="position:absolute; left:100; top:100; width:300; height:200">
<table cellpadding="20"><tr><th style="background:#F0D000">
<span style="white-space:nowrap;">MOBILBOX - beweg mich!</span><br>
</th></tr></table>
</div>
  <!-- Definition der mobilen Kiste beendet -->

<br>
<br>
<br>
<form>  <!-- HTML-Formular definieren -->

  <!-- Buttons zum Verschieben der Kiste : -->
<input type=button value="hoch" onClick="moverel(0,-10)"><br>
<input type=button value="links" onClick="moverel(-10,0)"><br>
<input type=button value="rechts" onClick="moverel(10,0)"><br>
<input type=button value="runter" onClick="moverel(0,10)"><br>
<br>
<input type=button value="Ausgangsposition" onClick="moveabs(100,100)">
  <!-- das waren die Buttons -->

</form> <!-- HTML-Formular beenden -->
</body>
</html>
Autor: Ulrich Kritzner