Gerd: Bildübergänge

Hallo,

ich suche ein Script um einen Bildübergang zu erzeugen etwa so wie hier: http://www.selfhtml.net/dhtml/modelle/dynamische_filter.htm nur halt das es für "alle" Browser funktioniert. Es soll eigendlich so aussehen wie auf maggi.de ich weiß nur nicht wie sie es da machen.

Grüße Gerd

  1. Lieber Gerd,

    nur halt das es für "alle" Browser funktioniert.

    herzlich willkommen zu meinem kleinen Lehrgang!

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Lieber Gerd,

      nur halt das es für "alle" Browser funktioniert.

      herzlich willkommen zu meinem kleinen Lehrgang!

      Liebe Grüße,

      Felix Riesterer.

      Vielen Dank Felix,

      mit diesem Script bin ich schon sehr  zufrieden:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html><head><title>Eine Bilderslideshow</title>

      <script type="text/javascript">
              function fade(step) {
                  var imgs = document.getElementById("meinFader").getElementsByTagName("img");

      step = step || 0;

      imgs[counter].style.opacity = step/100;
                  imgs[counter].style.filter = "alpha(opacity=" + step + ")"; //

      step = step + 2;

      if (step <= 100) {
                      window.setTimeout(function () { fade(step); }, 1);
                  } else {
                      window.setTimeout(next, 5000);
                  }
              }

      function next() {
                  var imgs = document.getElementById("meinFader").getElementsByTagName("img");

      if (typeof(counter) != "number") {
                      counter = 0;
                  }

      counter++;

      if (counter < imgs.length) {
                      fade();
                  }
              };
          </script>

      <style type="text/css">
              .next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0);

      }
              #meinFader { position: relative; }
          </style>

      </head>

      <body>
          <p id="meinFader">
              <img src="1.jpg" alt="">
              <img src="2.jpg" alt="" class="next">
              <img src="3.jpg" alt="" class="next">
          </p>
          <p><a href="javascript:next()">Slideshow starten</a></p>
      </body></html>

      Das einzige was ich mir jetzt noch wünschen würde ist, dass sich die Bilder immer wiederholen (also das nach dem letztn wieder mit dem 1. angefangen wir und das automatisch gestartet wird und man nich auf den Link klicken muss.

      Ist sicher ganz einfach ich kenne mich nur mit JavaScript nicht aus.

      Grüße Gerd

      1. Lieber Gerd,

        Vielen Dank Felix,

        mit diesem Script bin ich schon sehr  zufrieden:
        [...Code...]
        Das einzige was ich mir jetzt noch wünschen würde ist, dass sich die Bilder immer wiederholen (also das nach dem letztn wieder mit dem 1. angefangen wir und das automatisch gestartet wird und man nich auf den Link klicken muss.

        Ist sicher ganz einfach ich kenne mich nur mit JavaScript nicht aus.

        Wenn Du den Artikel weiter anschaust, dann wirst Du den Punkt finden, an dem steht, dass dieser Ansatz eben genau den Schwachpunkt hat, dass eine Endlos-Slideshow damit nicht möglich ist. Darum geht der Artikel ja auch weiter, um an späterer Stelle eine Endlos-Sclideshow anzubieten.

        Warst Du noch nicht bis dorthin durchgedrungen?

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Lieber Felix,

          nein ich hatte das bis dahin noch nicht gelesen. Jetzt funktioniert zwar die Endlosschleife, aber ich kann den Bildern keine eigenen alt="..." und in meinem Fall usemap="..." zuweisen. Mit dem 1. Script wäre das ja gegangen.
          Gibt es da noch ne Möglichkeit?

          Vielen Dank für deine Hilfe

          Grüße Gerd

          1. Lieber Gerd,

            nein ich hatte das bis dahin noch nicht gelesen. Jetzt funktioniert zwar [...] aber [...]
            Gibt es da noch ne Möglichkeit?

            ich fürchte, ich muss Dich nun dem Studium des Artikels überlassen, da ich Dir keine fertige Lösung anbieten mag, die ich zum Einen erst selbst erstellen müsste, und für die ich Dir zum Anderen etwas berechnen müsste, was ich ja garnicht will.

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. Lieber Felix,

              dann werd ich das so hinnehmen müssen. Vielen Dank für deine Mühen.

              Grüße Gerd

  2. Hallo Gerd,

    Eine Alternative zur Felix' kleinem, aber sehr lehrreichen Workshop wäre vielleicht der Einsatz von JQuery in Verbindung mit dem Cyle Plugin.

    Gruß
    Ole
    (8-)>

    --
    Das Wort Vegetarier kommt aus dem Indianischen und bedeutet: Zu dumm zum Jagen.