Hamb: Vor- und Zurück-Button als Steuerung für Hauptframe

Hallo,

ich habe ein Frameset und möchte in der Navigationsleiste einen Vor- und Zurück-Button haben, um Seiten im Hauptframe vor- und zurückzublättern; ich meine dabei nicht die history-Funktion, sondern eine Abfolge von HTML-Dateien mit verschiedenen Namen. Kann ich das wie bei dem „Bilderbuch zum Umblättern“ mit Javascript lösen? Kann man das Script also auch umgestalten für normale HTML-Dateien?

Viele Grüße!

  1. Hallo Hamb,

    Kann ich das wie bei dem „Bilderbuch zum Umblättern“ mit Javascript lösen? Kann man das Script also auch umgestalten für normale HTML-Dateien?

    Ich kenne zwar das geannte Script nicht aber ja, es geht mit JavaScript.

    Mit freundlichem Gruß
    Micha

    1. Guten Morgen!

      Kann ich das wie bei dem „Bilderbuch zum Umblättern“ mit Javascript lösen? Kann man das Script also auch umgestalten für normale HTML-Dateien?

      Ich kenne zwar das geannte Script nicht aber ja, es geht mit JavaScript.

      Ich meinte das Script von Selfhtml http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm

      Mir ist nicht klar, wie ich das für andere Dateien und für einen anderen Frame modifizieren müßte. Hast Du oder sonstz jemand einen Tip?

      Vielen Dank!

      <html><head>
      <title>Test</title>
      <script type="text/javascript" src="dhtml.js"></script>
      <script type="text/javascript">
      var Bild = new Array();
      Bild[0] = new Image();
      Bild[0].src = "bilderbuch01.gif";
      Bild[1] = new Image();
      Bild[1].src = "bilderbuch02.gif";
      Bild[2] = new Image();
      Bild[2].src = "bilderbuch03.gif";
      Bild[3] = new Image();
      Bild[3].src = "bilderbuch04.gif";
      Bild[4] = new Image();
      Bild[4].src = "bilderbuch05.gif";

      var bildbereich;
      var zeige = 0;
      var Breite = 300;
      var aktuelleBreite = 0;
      var Schrittweite = 6;
      var Schrittverzoegerung = 1;

      function Blaettern (Richtung) {
        zeige = zeige + Richtung;
        if (zeige > Bild.length - 1) {
          zeige = 0;
        } else if (zeige < 0) {
          zeige = Bild.length - 1;
        }
        if (DOM || MSIE4) {
          bildbereich.style.clip = "rect(0 0 225px 0)";
        } else if (NS4) {
          bildbereich.clip.right = 0;
        }
        if (DOM && bildbereich.firstChild) {
          bildbereich.firstChild.src = Bild[zeige].src;
        } else if (MSIE4) {
          bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">';
        } else if (NS4) {
          bildbereich.visibility = "hide";
          setContent("id", "Bildbereich", null,
            '<img src="' + Bild[zeige].src + '">');
          bildbereich.visibility = "show";
        }
        BildAufbauen();
      }

      function BildAufbauen () {
        if (aktuelleBreite <= Breite) {
          if (DOM || MSIE4) {
            bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 225px 0)";
          } else if (NS4) {
            bildbereich.clip.right = aktuelleBreite;
          }
          aktuelleBreite = aktuelleBreite + Schrittweite;
          window.setTimeout("BildAufbauen()", Schrittverzoegerung);
        } else {
          aktuelleBreite = 0;
          if (DOM || MSIE4) {
            bildbereich.style.clip = "rect(0 " + Breite + "px 225px 0)";
          } else if (NS4) {
            bildbereich.clip.right = Breite;
          }
        }
      }

      function Init () {
        bildbereich = getElement("id", "Bildbereich");
        if (DOM && document.createElement && bildbereich.appendChild) {
          var img = document.createElement("img");
          img.setAttribute("src", Bild[0].src);
          bildbereich.appendChild(img);
        } else if (MSIE4) {
          bildbereich.innerHTML = '<img src="' + Bild[0].src + '">';
        } else if (NS4) {
          setContent("id", "Bildbereich", null,
            '<img src="' + Bild[0].src + '">');
        }
      }
      </script>
      <style type="text/css">
      body { color:black; background-color:white; }
      #Bildbereich { position:absolute; left:10px; top:140px; padding:0;
        clip:rect(0 300px 225px 0); visibility:show; }
      #Navigationsbereich { position:absolute; left:320px; top:140px;
        width:100px; font-size:24px; }
      </style>

      </head>
      <body onload="Init()">

      <div id="Bildbereich"></div>

      <div id="Navigationsbereich">
      [<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]
      [<a href="javascript:Blaettern(1)">&gt;&gt;</a>]
      </div>

      </body>
      </html>

  2. Hallo,

    ich würde mich freuen, wen sich jemand nochmals mein Problem ansehen könnte. Ich will das ganze nicht nochmal posten. Hat jemand eine Idee?

    Viele Grüße!

    1. Hallo Hamb,

      wenn Du sagst, wo Du genau probleme hast, sicher. Ein fertiges Script gibts nicht. SELFHTML bietet einiges zu diesem Thema an, was Du Dir ansehen solltest.

      Mit freundlichem Gruß
      Micha

      1. Hallo Micha,

        klar schreibt mir hier niemand ein Script - das wollte ich auch gar nicht, ich dachte nur, daß es möglich wäre das vorliegende Script ("Bilderbuch zum Umblättern") mit wenig Aufwand zu modifizieren, aber so weit blicke ich JS nicht. Trotzdem danke.

        Gruß!

        1. Hallo Hamb,

          ich dachte nur, daß es möglich wäre das vorliegende Script ("Bilderbuch zum Umblättern") mit wenig Aufwand zu modifizieren

          Möglicherweise, ich habe es mir nicht angesehen. Wie gesagt, formuliere Dein Versuch und das Problem, an dem Du nicht weiter kommst. Bisher hast Du lediglich das Ziel geschilderrt und ein fertiges Script gezeigt, welches nicht das macht, was Du willst. Eigenleistung? Was hast Du versuchst? Wo kommst Du nicht weiter? Welche fehlermeldung bekommst Du?

          Mit freundlichem Gruß
          Micha

        2. Hallo Hamb,

          SELFHTML ist zum Selbststudium da. Anscheinend findest du das "Bilderbuch zum Umblättern" zwar schön, hast aber weder verstanden, wie es funktioniert, noch tut es genau das, was du willst.

          Fang' also mit dem Selbststudium an:
          Du willst zwei Buttons zum Umblättern, ok. Dann bastle mal zwei Buttons rein in deinen Navigationsframe. Auch wenn sie am Anfang noch nicht umblättern können, müssen sie zuerst mal da sein, stimmts?
          Wenn du nicht weisst, wie du sie reinbasteln kannst, schau unter "Button" und "Verweis" im SELFHTML. Dort wirst du fündig.

          Wenn du sie dann trotzdem nicht auf den Schirm bekommst, frag' in der Foren-Rubrik HTML/XHTML und zeige wenigstens das, was du bisher versucht hast. Dann wird dir auch jemand helfen die Buttons richtig anzuzeigen – Schritt 1 wäre dann erledigt.

          Sie können dann natürlich noch nicht umblättern, ok. Überleg dir also, welche Dateien du blättern willst, wie sie heißen, wo auf dem Server sie liegen, in welchem Frame sie erscheinen sollen usw., und setze dann die Verweisziele für die Buttons entsprechend. Was ein Verweisziel ist? Das solltest du bis dahin unter "Verweis" gelesen und verstanden haben.

          Langer Rede, kurzer Sinn: SELFHTML ist zum Selbststudium da.

          Wenn dabei die eine oder andere konkrete Frage auftaucht, wird dir auch geholfen. Aber nicht bei Fragen wie "ich hätte gerne eine Eier legende Wollmilchsau, die so ähnlich aussieht wie jene da, und sie sollte auch sprechen können, aber ich habe leider keine Ahnung von der Landwirtschaft".

          schönes Wochenende,
          Don P

          1. Hey donp.

            Sehr schöne Darstellung, Kompliment. Wenn Du noch die zitierten SELFHTML-Quellen verlinkt hättest, wäre es perfekt gewesen. Ein "Hilfreich" gibt's trotzdem von mir :)

            Siechfred

            --
            Wir vom Moderatorenteam haben keinerlei Humor, von dem wir wüssten.
          2. Hallo Don P,

            SELFHTML ist zum Selbststudium da. Anscheinend findest du das "Bilderbuch zum Umblättern" zwar schön, hast aber weder verstanden, wie es funktioniert, noch tut es genau das, was du willst.

            Das ist genau mein Problem ;-)

            Dafür habe ich gebastelt und einen nicht funktionierenden Vorschlag an die fachkundige Gemeinde.

            Um das Problem noch einmal genau zu beschreiben: Ich habe eine große HTML-Datei, die alle "Seiten" enthält und möchte mittels Button einzelne Ankerpunkte ansteuern, sozusagen die Seiten vor- und zurückblättern.

            Wird es halbwegs klar, was ich damit will?

            Nicht funktionierendes Script für den Vor-Button:

            function Vor()
            { var i = 0;
              var Seite = 0;
              Seite = new Array(7);
              Seite[0] = "152";
              Seite[1] = "153";
              Seite[2] = "154";
              Seite[3] = "161";
              Seite[4] = "162";
              Seite[5] = "163";
              Seite[6] = "164";
              Seite[7] = "171";

            window.open("test.html#" + Seite[i+1], "rechts");

            }

            HTML-Teil:

            <form name="blaettern" action="">
            <input class="button" type="submit" onclick="Zurueck();" value="&lt;&lt; Zur&uuml;ck" alt="Zur&uuml;ck" />
            <input class="button" type="submit" onclick="Vor();" value="&gt;&gt; Vor" alt="Vor" />
            </form>