JnYoms: Ebenen nacheinander einblenden

SELF-Forum

Ebenen nacheinander einblenden

JnYoms
– Informationen zu den Bewertungsregeln

Hallo Leute,

ich bin leider noch sozusagen ein Programmier-Anfänger. Also bitte nicht lachen, wenn die Frage für euch zu simpel ist ...
Ich bin jetzt bei einer Seite auf folgendes Problem gestoßen:
Habe will 4 Ebenen übereinanderlegen (sollen gleiche Position und Größe haben). So, und jetzt will ich die nacheinander einblenden und ausblenden. Also Ebene 1, anderem versteckt und dann Ebene 2, 3 und 4 sichtbar. Das soll jeweils nach 5 Sekunden geschehen. Und dann wieder von vorn losgehen.
Ebene 1,2,3,4,1,2,3,4

Könnt ihr mir BITTE helfen????

Liebe Grüße und großen Dank im Voraus
JnYoms

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Ebenen nacheinander einblenden

    Christian
    – Informationen zu den Bewertungsregeln

    Hi,

    Die Funktion muss logischerweise alle 5 sek sich selber aufrufen, und eine Schleife enthalten, die alle 4 Ebenen anspricht, und entsprechend einen visibility-zustand zuweist.

    function wechsel(id)
    {
       var anzahl = 4;
       for(var i = 1; i < anzahl+1; i++)
       {
          var layer = document.getElementById("layer"+i);
          var visibility = (i-1 == (id-1) % anzahl) ? "visible" : "hidden";
          layer.style.visibility = visibility;
       }

    id++;
       window.setTimeout("wechsel("+id+")", 5000);
    }

    im body: onload="wechel(1)"

    dann vier Ebenen mit id="layer1" bis id="layer4"

    Gruß
    Christian

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Ebenen nacheinander einblenden

      JnYoms
      – Informationen zu den Bewertungsregeln

      Hi Christian, danke dir schonmal sehr für die Hilfe!
      Leider funktioniert es nicht, in der Browseransicht (IE5) wird nur die letzte Ebene (Ebene 4) eingeblendet und keine Animation. *verzweifelt bin*

      KANN MIR BITTE NOCHMAL JEMAND HELFEN???

      Liebe Grüße
      JnYoms

      Hier vielleicht nochmal der gesamte ausführliche Code (wenn das weiterhilft...)

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>Startmenue</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script language="JavaScript">
      function wechsel(id)
      {
       var anzahl = 4;
       for(var i = 1; i < anzahl+1; i++)
        {
        var layer = document.getElementById("layer"+i);
        var visibility = (i-1 == (id-1) % anzahl) ? "visible" : "hidden";
        layer.style.visibility = visibilty;
       }

      id++;
       window.setTimeout("wechsel("+id+")", 5000);
      }
      </script>
      </head>

      <body bgcolor="#000000" text="#00CC00" onLoad="wechsel(1)">
      <div id="Layer1" style="position:absolute; left:2px; top:10px; width:113px; height:433px; z-index:1; visibility: hidden;">
        <table width="100%" border="0">
          <tr>
            <td><img src="Bilder/erdaufgang.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center">
                <p><font size="2">Offen für andere Sichtweisen?<br>
                  </font></p>
                <p> </p>
              </div></td>
          </tr>
          <tr>
            <td><img src="Bilder/pflanze.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center"><font size="2">Darf man Pflanzen verbieten?</font></div></td>
          </tr>
        </table>
      </div>
      <div id="Layer2" style="position:absolute; left:2px; top:9px; width:140px; height:583px; z-index:2; visibility: hidden;">
        <table width="100%" border="0">
          <tr>
            <td><img src="Bilder/sprung.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center">
                <p><font size="2">Alte Muster überwinden und ...<br>
                  </font></p>
                <p> </p>
              </div></td>
          </tr>
          <tr>
            <td><img src="Bilder/licht.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center"><font size="2">Licht ins Dunkle bringen?</font></div></td>
          </tr>
        </table>
      </div>
      <div id="Layer3" style="position:absolute; left:2px; top:9px; width:141px; height:584px; z-index:3; visibility: hidden;">
        <table width="100%" border="0">
          <tr>
            <td><img src="Bilder/bridge.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center">
                <p><font size="2">... Neuland entdecken?<br>
                  <br>
                  </font></p>
                <p> </p>
              </div></td>
          </tr>
          <tr>
            <td><img src="Bilder/reverence2.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center"><font size="2">Neues zulassen?</font></div></td>
          </tr>
        </table>
      </div>
      <div id="Layer4" style="position:absolute; left:2px; top:8px; width:142px; height:586px; z-index:4; visibility: visible;">
        <table width="100%" border="0">
          <tr>
            <td><img src="Bilder/bullauge.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center">
                <p><font size="2">Blick über den "Tellerrand" hinaus?<br>
                  </font></p>
                <p> </p>
              </div></td>
          </tr>
          <tr>
            <td><img src="Bilder/zukunft.jpg" width="133" height="100"></td>
          </tr>
          <tr>
            <td><div align="center"><font size="2">Verantwortungsvoll denken und handeln?</font></div></td>
          </tr>
        </table>
      </div>
      </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln