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 23
Zur Übersicht

23. Neue Ebenen erzeugen (07.02.2000)

Im Netscape-DOM lassen sich Ebenen dynamisch mittels Ebenenname=new Layer(...) erzeugen und danach mit Ebenenname.open() | Ebenenname.write(...) | Ebenenname.close() mit Inhalt füllen.

Nachfolgend wird im Beispiel 23a eine JavaScript-Funktion zur Nutzung im Internet Explorer vorgestellt, die einem HTML-Dokument neue DIV-Ebenen hinzufügt. Im BODY des Dokuments wird über die Eigenschaft innerHTML weiterer HTML-Code mit DIV-Anweisungen ergänzt. Diese enthalten CSS-Definitionen zur (absoluten) Positionierung des jeweiligen Blocks.
Der Funktion neueEbene() werden in Klammern der Name des neuen DIVs, sein Inhalt (das kann natürlich auch weiterer HTML-Code sein) und die Parameter l (Left), t (Top), h (Height), w (Width) – Angaben in Pixeln – sowie der Z-Index übergeben. 

      // JavaScript-Funktion 23a

      function NeueEbene(DIVID,DIVinhalt,l,t,h,w,z)
      {
      if (document.all)
      {
      var neuesdiv;
      neuesdiv="<DIV ID='"+DIVID+"' STYLE='Position: absolute; "+
        "Left: "+l+"px; "+"Top: "+t+"px; "+"Height: "+h+"px; "+
        "Width: "+w+"px; "+"Z-Index: "+z+"'>"+DIVinhalt+"</DIV>";
      document.all.seite.innerHTML=
        document.all.seite.innerHTML+neuesdiv;
      }
      }

      <!-- Funktionsaufruf 23a -->

      <A HREF="javascript:NeueEbene('D1','Ebene 1',100,150,100,200,1)">
        Ebene 1</A>
Beispiel 23b verwendet die neuen Möglichkeiten, die das W3C-DOM bietet, welches bereits im IE 5.x bzw. Netscape 6 (getestet mit der Preview-2-Version) zumindest teilweise implementiert worden ist. Speziell die Methoden getElementsById(), getElementsByTagName(), createElement() und setAttribute() sind für solche Anwendungen interessant, wobei setAttribute() offenbar nur von Netscape 6 verstanden wird. 

      // JavaScript-Funktion 23b

      function NeueEbene(ebenenID,l,t,w,h,z,fg,bg)
      {
      if (document.getElementById && document.createElement)
      {
      var neueebene=document.createElement("DIV");

      document.getElementById("seite").appendChild(neueebene);
      var styledef="Position: absolute; Left: "+l+"px; Top: "+t+"px; Width: "+w+
        "px; Height: "+h+"px; Z-Index: "+z+"; Color: "+fg+"; Background-Color: "+bg;

      if (navigator.appName=="Netscape")
      {
      neueebene.setAttribute("STYLE",styledef);
      neueebene.setAttribute("ID",ebenenID);
      }

      /* setAttribute(...) scheint im IE 5.x nicht zu klappen,
         deshalb explizite style-Zuweisung */
      if (navigator.appName=="Microsoft Internet Explorer")
      {
      neueebene.style.position="absolute";
      neueebene.style.left=l;
      neueebene.style.top=t;
      neueebene.style.width=w;
      neueebene.style.height=h;
      neueebene.style.zIndex=z;
      neueebene.style.color=fg;
      neueebene.style.backgroundColor=bg;
      neueebene.id=ebenenID;
      }
      document.getElementById(ebenenID).innerHTML="Inhalt";
      }
      }


      <!-- Funktionsaufruf 23b -->

      <A HREF="javascript:NeueEbene('ebene1',100,150,150,100,1,'white','red')">
        Neue Ebene 1 erzeugen</A>
In den Beispielen sind Links angeordnet, die beim Anklicken jeweils eine neue Ebene erscheinen lassen.