JavaScript - Verschieben von Seitenelementen

index Anfang rückwärts vorwärts runter
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.
index Anfang rückwärts vorwärts hoch runter 
<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>
index Anfang rückwärts vorwärts hoch
Autor: Ulrich Kritzner