Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 19
Zur Übersicht

19. DIV-Container in Bewegung (17.12.1999)

Dieses DHTML-Beispiel entstand aus einigen Experimenten zur dynamischen Positionierung von in DIV-Tags eingeschlossenen Objekten (z. B. Bilder). DIV-Container können per CSS ihre (absolute bzw. relative) Positionierungen zugewiesen werden. Mittels JavaScript-Funktionen lassen sich die DIVs samt Inhalt auf dem Bildschirm bewegen. Im nachfolgenden Beispiel geschieht das über die Skalierung des Punktes oben links, der bezüglich seiner Lage durch die Parameter Left und Top bestimmt wird.

      <DIV ID="kasten"
        STYLE="Z-Index: 2; Position: absolute; Left: 10px;
        Top: 50px; Width: 88px; Height: 31px">
        <A HREF="http://www.styleassistant.de">
        <IMG SRC="../images/styleassistant.gif" WIDTH="88"
        HEIGHT="31" BORDER="0" ALT="StyleAssistant"
        NAME="logo">
        </A>
      </DIV>
Die wichtigsten JS-Funktionen sind Vor(), Zurueck(), Hoch(), Runter() sowie Verschieben_x() und Verschieben_y(), deren Arbeitsweise sich weitgehend selbst erklären sollte. Das Ein- bzw. Ausschalten der Bewegung erfolgt durch die Buttons Start bzw. Stop, die ihrerseits die Funktion StartStop() steuern.

      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
      <!--

      /* ... */

      function Vor()
      {
      x=parseInt(eval(divname+".left"));
      eval(divname+".left=x+step");
      setTimeout("Verschieben_x()",zeit);
      }

      function Zurueck()
      {
      x=parseInt(eval(divname+".left"));
      eval(divname+".left=x-step");
      setTimeout("Verschieben_x()",zeit);
      }

      function Hoch()
      {
      y=parseInt(eval(divname+".top"));
      eval(divname+".top=y-step");
      setTimeout("Verschieben_y()",zeit);
      }

      function Runter()
      {
      y=parseInt(eval(divname+".top"));
      eval(divname+".top=y+step");
      setTimeout("Verschieben_y()",zeit);
      }

      function Verschieben_x()
      {
      if (x>=xe-bildbreite)
      {
      endex=true;
      }

      if (x<=xa)
      {
      endex=false;
      }

      if ((endex==false)&&(stop!=false))
      {
      Vor();
      }

      if ((endex==true)&&(stop!=false))
      {
      Zurueck();
      }
      }

      function Verschieben_y()
      {
      if (y>=ye-bildhoehe)
      {
      endey=true;
      }

      if (y<=ya)
      {
      endey=false;
      }

      if ((endey==false)&&(stop!=false))
      {
      Runter();
      }

      if ((endey==true)&&(stop!=false))
      {
      Hoch();
      }
      }

      /* ... */

      //-->
      </SCRIPT>
Im Beispiel 19a ist das Zusammenspiel dieser und weiterer Routinen zu sehen. Das Prinzip funktioniert auch unter Netscape, da einige Anpassungen an dessen (immer wieder begeisterndes ;-) Objekt-Modell eingebaut wurden. Dort wurde jedoch der im Internet Explorer sichtbare Positionsrahmen nicht verwendet, da die diversen Netscape-Browser von der absoluten Positionierung eines (leeren) Rahmens ihre eigenen Vorstellungen haben ...


Das Prinzip der Rotation von DIVs wird im Beispiel 19b veranschaulicht. Demonstriert wird die kreisförmige Bewegung von 4 farbigen 20x20 Pixel grossen Quadraten um ein ebenso grosses schwarzes Quadrat. Nach einigen Initialisierungen bewegen sich die Objekte wie gewünscht im Uhrzeigersinn oder auch entgegengesetzt um das Zentrum. Die wichtigsten Rechengrössen sind der Radius des umschriebenen Kreises und die Schrittweite des Drehwinkels, die mit weiteren Hilfswerten den Winkelfunktionen Sinus bzw. Cosinus (im Bogenmass!) zur Berechnung der jeweiligen Punktkoordinaten der 4 DIVs (left=x und top=y) übergeben werden. Die folgende Abbildung veranschaulicht den Sachverhalt: der gelbe Punkt bewegt sich um den roten Mittelpunkt.

Dreieck im Kreis


Die JavaScript-Funktion rotation() hat diesen Aufbau: 

      function rotation()
      {
      winkel=winkel+winkelstep;
      eval(objblau+".left=radius*Math.cos(richtung*winkel*radfaktor)+dx");
      eval(objblau+".top=radius*Math.sin(richtung*winkel*radfaktor)+dy");
      eval(objgruen+".left=radius*Math.cos(richtung*(90+winkel)*radfaktor)+dx");
      eval(objgruen+".top=radius*Math.sin(richtung*(90+winkel)*radfaktor)+dy");
      eval(objgelb+".left=radius*Math.cos(richtung*(180+winkel)*radfaktor)+dx");
      eval(objgelb+".top=radius*Math.sin(richtung*(180+winkel)*radfaktor)+dy");
      eval(objrot+".left=radius*Math.cos(richtung*(270+winkel)*radfaktor)+dx");
      eval(objrot+".top=radius*Math.sin(richtung*(270+winkel)*radfaktor)+dy");
      if (stop!=true)
      {
      setTimeout("rotation()",zeit);
      }
      }

Eine weitere interessante Anwendung zeigt das Beispiel 19c. Es wurde die Bewegung einer in einem DIV eingeschlossenen Grafik (Pfeil) zur Kennzeichnung des jeweils ausgewählten Links mit dem Schreiben von Text in ein anderes DIV kombiniert (siehe auch Beispiel 12c).