SELFHTML Forums-Auslese DHTML

Forums-Auslese
Dynamisches Positionieren
Diese Seite ist ein Dokument mit Informationstext

 Objektanimation für Netscape 4.x und IE 4.x

 

Objektanimation für Netscape 4.x und IE 4.x

Basierend auf einem Forums-Beitrag vom 30.07.1998 von:
 Paul Hobrecker, hobrecker@solutions-partner.de

Sowohl in Netscape als auch im Microsoft Internet-Explorer können im Browserfenster Bereiche mit beliebigem HTML-Inhalt frei positionierbar definiert werden. Dies geschieht bei Netscape mit Layern, deren Funktionalität beim Internet-Explorer im "document.all"-Objekt enthalten ist (lesen Sie hierzu Dynamisches Positionieren (Netscape) und Das all-Objekt). Das Code-Beispiel aus diesem Beitrag hat den Vorteil, mit relativ wenig Aufwand auf beiden Browsern zu laufen. Insbesondere kann hier für beide Browser der selbe HTML-Block verwendet werden. Damit dies funktioniert, muß man wissen, daß die Positionierung bei beiden Browsern mit dem <div ...>-Tag auf nahezu gleiche Weise funktioniert. Lediglich die unterschiedliche JavaScript-Referenzierung der Koordinaten,

wird im Beispiel durch die String-Variablen Objekt_Referenz und IE_Style gelöst, welche abhängig vom Browsertyp in function start() definiert werden. In der ersten Variable wird der Vorsatz document.all bzw. document.layers und in der zweiten der Zusatz .style für IE 4.x gespeichert. In der Funktion Objekt_Positionieren(Objekt_Name, links, oben) wird nun mit diesen Variablen und dem Objektnamen ein String zusammengesetzt, der genau einem JavaScript-Befehl zur Positionierung entspricht und dieser mit der eval("...")-Funktion ausgeführt.

<html>
<head><title>Bewegliche Objekte für Netscape und Microsoft IE</title>
<script language="JavaScript">
<!--
  var pausenLaenge = 0,
      Objekt1_Step = 5,
      Objekt2_Winkelgeschw = 0.05,
      Objekt1_XPos = 200,
      Objekt2_Winkel = 0,
      Objekt_Referenz="",
      IE_Style="";

  function start() {
    if (navigator.appName == "Netscape") {
        Objekt_Referenz="document.layers";
        IE_Style="";
        }else{
        Objekt_Referenz="document.all";
        IE_Style=".style";
    }
    bewegung();
  }

  function bewegung() {
    Objekt_Positionieren("Objekt1",Objekt1_XPos,10);
    if (Objekt1_XPos > 300 || Objekt1_XPos < 100)
        Objekt1_Step = Objekt1_Step * (-1);
    Objekt1_XPos += Objekt1_Step;
    Objekt2_XPos = Math.sin(Objekt2_Winkel)*70 + 100;
    Objekt2_YPos = Math.cos(Objekt2_Winkel)*70 + 200;
    Objekt_Positionieren("Objekt2", Objekt2_XPos, Objekt2_YPos);
    Objekt2_Winkel += Objekt2_Winkelgeschw;
    MeinTimer = window.setTimeout("bewegung();", pausenLaenge);
  }

  function Objekt_Positionieren(Objekt_Name, links, oben){
    eval(Objekt_Referenz+'["'+Objekt_Name+'"]'+IE_Style+'.top = oben');
    eval(Objekt_Referenz+'["'+Objekt_Name+'"]'+IE_Style+'.left = links');
  }
//-->
</script>
</head>
<body bgcolor="#ffffff" onload="start()">
  <div id="Objekt1" style="position:absolute;top:200;left:100;">
       <img src="objekt1.gif" width=90 height=90 border=0>
  </div>
  <div id="Objekt2" style="position:absolute;top:200;left:300;">
       <img src="objekt2.gif" width=90 height=90 border=0>
  </div>
</body></html>

Weitere Erläuterungen zu diesem Beispiel finden Sie im Quellcode der entsprechenden Datei unter:
 http://www.videoaktuell.de/dhtml

weiter: Dynamisches Ändern von Inhalten
zurück: JavaScript - Sonstiges
 

SELFHTML Forums-Auslese DHTML

© 1999  das Redaktionsteam