enrico: DOM (Firefox): Elemente dynamisch einbinden/ändern

Beitrag lesen

Hallo,

nachdem ich es gestern, mit freundlicher Unterstützung von Christian S. und eddi, geschafft
habe, die Scrollhöhe/Scrollweite per Javascript beim Firefox auszulesen, will ich nun die
Einbindung der Scrollgrafiken dynamisch gestalten.

Der Aufbau des Frames "Scrolling" ist wie folgt:

+--------------+
   | Seitenanfang |
   +--------------+

+--------------+
   | Hochscrollen |
   +--------------+

+----------------------+
   | Schnell hochscrollen |
   +----------------------+

+------------------------+
   | Schnell runterscrollen |
   +------------------------+

+----------------+
   | Runterscrollen |
   +----------------+

+------------+
   | Seitenende |
   +------------+

Diese Schaltflächen steuern den Frame "Anzeige".

Nun möchte ich die Schaltflächen über das Document Object Model (DOM) dynamisch einbinden, so
dass beispielsweise die Links "Seitenanfang", "Hochscrollen" und "Schnell hochscrollen" nur als
reine Grafiken, also ohne Definierung als Links, dargestellt werden, wenn die Seite zum ersten
Mal aufgerufen wird, also noch kein Scrolling stattgefunden hat, oder ich zum Anfang der Seite
gescrollt habe:

var Seitenlaenge = parent.Anzeige.document.body.offsetHeight;
   var Anzeigebereich = parent.Anzeige.document.body.clientHeight;
   var Scrollposition = parent.Anzeige.document.body.scrollTop;

var DIV_Seitenanfang = window.document.getElementById ("DIV_Seitenanfang");
   var DIV_Hochscrollen = window.document.getElementById ("DIV_Hochscrollen");
   var DIV_Hochscrollen_schnell = window.document.getElementById ("DIV_Hochscrollen_schnell");
   var DIV_Runterscrollen_schnell = window.document.getElementById ("DIV_Runterscrollen_schnell");
   var DIV_Runterscrollen = window.document.getElementById ("DIV_Runterscrollen");
   var DIV_Seitenende = window.document.getElementById ("DIV_Seitenende");

if (Scrollposition == 0)
   {
      DIV_Seitenanfang.className = "Seitenanfang_inaktiv";
      DIV_Hochscrollen.className = "Hochscrollen_inaktiv";
      DIV_Hochscrollen_schnell.className = "Hochscrollen_schnell_inaktiv";

if (Seitenlaenge != 0)
      {
         DIV_Runterscrollen_schnell.className = "Runterscrollen_schnell";
         DIV_Runterscrollen.className = "Runterscrollen";
         DIV_Seitenende.className = "Seitenende";

var A_Runterscrollen_schnell = window.document.createElement ("a");
             A_Runterscrollen_schnell.setAttribute ("href","javascript:void (0);");
             A_Runterscrollen_schnell.setAttribute ("onMouseover", "Runterscrollen_starten (10);");
             A_Runterscrollen_schnell.setAttribute ("onMouseout","Scrollen_stoppen ();");
             A_Runterscrollen_schnell.setAttribute ("onClick", "this.bur();");

var A_Runterscrollen = window.document.createElement ("a");
             A_Runterscrollen.setAttribute ("href","javascript:void (0);");
             A_Runterscrollen.setAttribute ("onMouseover", "Runterscrollen_starten (1);");
             A_Runterscrollen.setAttribute ("onMouseout","Scrollen_stoppen ();");
             A_Runterscrollen.setAttribute ("onClick", "this.bur();");

var A_Seitenende = window.document.createElement ("a");
             A_Seitenende.setAttribute ("href","javascript:void (0);");
             A_Seitenende.setAttribute ("onClick", "Seitenende();this.blur();");

DIV_Runterscrollen_schnell.appendChild (A_Runterscrollen_schnell);
         DIV_Runterscrollen.appendChild (A_Runterscrollen);
         DIV_Seitenende.appendChild (A_Seitenende);

DIV_A = window.document.createElement ("div");

A_Runterscrollen_schnell.appendChild (DIV_A);
         A_Runterscrollen.appendChild (DIV_A);
         A_Seitenende.appendChild (DIV_A);
      }
      else
      {
         DIV_Seitenende.className = "Seitenende_inaktiv";
         DIV_Runterscrollen.className = "Runterscrollen_inaktiv";
         DIV_Runterscrollen_schnell.className = "Runterscrollen_schnell_inaktiv";
      }
   }

Die Anzeige der inaktiven Grafiken bzw. der Grafiken mit den jeweiligen css-Klassen funktioniert.

Was noch nicht klappt, ist die Einbindung des Tags "a" und des darin enthaltenen leeren Div's, damit
der MouseOver-/MouseOut-Effekt auch "greift".

Letztendlich soll folgender Aufbau erzeugt werden (Beispiel):

<div id="Seitenanfang" class="Seitenanfang_inaktiv">
      <a href="../PHP/Anzeige.php#Seitenanfang" target="Anzeige" onClick="Seitenanfang();this.blur();">
         <div></div>
      </a>
   </div>

<div id="Hochscrollen" class="Hochscrollen_inaktiv">
      <a href="javascript:void(0)" onMouseover="Hochscrollen_starten (-1);" onMouseout="Scrollen_stoppen ();">
         <div></div>
      </a>
   </div>

Die Fehler-Konsole von Firefox gibt mir keine Warnungen oder Fehlermeldungen aus, so der Fehler (?) vermutlich
an anderer Stelle liegt.

Leider komme ich aber nicht dahinter, _wo_ ich etwas falsch gemacht haben oder etwas vergessen haben sollte.

Ich hoffe, Ihr könnt mir weiterhelfen.

Schon mal vielen lieben Dank im Voraus.

Gruß
enrico