Ben: Fading-Effekt

Hallo,

ich soll auf einer Homepage einen Fading-Effekt mit mehreren Bildern, wie eine Diashow mit Überblendungen, einbauen (ich weiß, dass dies wahrscheinlich mal wieder nur mit dem IE sichtbar sein wird). Könnte mir da vielleicht jemand einen Denkansatz geben, denn ich weiß nicht wirklich wo ich anfangen soll...

Danke im Voraus,
Ben

  1. Hallo Ben,

    ich soll auf einer Homepage einen Fading-Effekt mit mehreren Bildern, wie eine Diashow mit Überblendungen, einbauen (ich weiß, dass dies wahrscheinlich mal wieder nur mit dem IE sichtbar sein wird). Könnte mir da vielleicht jemand einen Denkansatz geben, denn ich weiß nicht wirklich wo ich anfangen soll...

    Es gibt einen CSS-Filter für den IE namens alpha, den Du verwenden kannst. (mit JavaScript kannst Du den auch ändern) Der Mozilla kennt dagegen die CSS-Eigenschaft »-moz-opacity«, die Werte zwischen 0 und 1 akzeptiert. In SELFHTML bzw. Archiv findest Du mehr. Andere Browser kannst Du AFAIK noch nicht bedienen, es wird später (CSS3) mal eine Eigenschaft »opacity« geben.

    Christian

    --
    Ich bitte darum, dass ein Themenbereich (BARRIEREFREIHEIT) eingerichtet wird.
    1. Hi Christian,

      Es gibt einen CSS-Filter für den IE namens alpha, den Du verwenden kannst. (mit JavaScript kannst Du den auch ändern) Der Mozilla kennt dagegen die CSS-Eigenschaft »-moz-opacity«, die Werte zwischen 0 und 1 akzeptiert. In SELFHTML bzw. Archiv findest Du mehr. Andere Browser kannst Du AFAIK noch nicht bedienen, es wird später (CSS3) mal eine Eigenschaft »opacity« geben.

      CSS3 wird für mich anscheinend echt mal Zeit (siehe meine früheren Postings) *gg*

      Vielen Dank, wusste nicht, dass ich den Filter auch verändern kann. Dann werde ich das Ganze mal mit diesen zwei Filtern und irgend einer for-schleife und timeout versuchen (bin noch etwas unsicher, was JavaScript betrifft, aber sehr gewillt, es zu lernen).

      Danke für die Ansätze und schönen Sonntag noch
      Ben

    2. Hallo,

      habe jetzt den folgenden Filter von MS für mich entdeckt: http://selfhtml.teamone.de/dhtml/modelle/dynamische_filter.htm#blend_trans

      Damit dürfte es ja auch gehen. Muss dann nur mal etwas über die Variante für den Mozilla finden. Gibt es vielleicht auch eine für die anderen Browser oder sollte ich in diesem Fall ein statisches Bild verwenden (das Fading dient eher als Design-Element und nicht als Bildergallerie oder ähnliches, muss also nicht zwingenderweise alle Bilder anzeigen).

      Danke und viele Grüße
      Ben

      1. Hallo Ben,

        Damit dürfte es ja auch gehen. Muss dann nur mal etwas über die Variante für den Mozilla finden.

        Die Mozilla-Variante musst Du 2 Bilder übereinandersetzen und das obere dann langsam ausblenden. (und wenn die Opacity auf 0 ist, dann es komplett ausblenden) Daher würde ich Dir dringendst auch für den IE den Alpha-_CSS_-Filter anraten, sonst drehst Du komplett durch.

        </archiv/2002/6/15679/>
        http://selfhtml.teamone.de/css/eigenschaften/filter.htm#alpha

        Und wenn Du noch nach weiterem suchen willst:
        http://selfsuche.teamone.de/cgi-bin/such.pl?suchausdruck=%2B"-moz-opacity"&case=on&lang=on&feld=alle&index_5=on&index_6=on&hits=100
        (»-moz-opacity« schluckt er nicht, da er denkt, Du willst das Wort »moz-opacity« ausschließen)

        Zum Übereinandersetzen dürfte position: relative und z-index geeignet sein, musst Du halt mal mit rumspielen.

        Gibt es vielleicht auch eine für die anderen Browser

        Nein.

        oder sollte ich in diesem Fall ein statisches Bild verwenden

        Ja.

        (das Fading dient eher als Design-Element

        Meinst Du nicht, das lenkt die Besucher vom Inhalt ab?

        Christian

        --
        Ich bitte darum, dass ein Themenbereich (BARRIEREFREIHEIT) eingerichtet wird.
        1. Hi Christian,

          danke für die Tipps. Dann werde ich mich also auf den alpha-filter beschränken.

          Meinst Du nicht, das lenkt die Besucher vom Inhalt ab?

          Die Bilder sind nur sehr "seicht", sie sind farblich auf den Hintergrund angepasst und durch eine langsame Überblendung entsteht meiner Meinung nach keine Ablenkung für den Besucher. Wollte extra etwas dezentes, weil ein blinkendes gif auf jeden Fall nerven würde. ;-)

          Viele Grüße
          Ben

          1. Hi,

            wieso baust du eigentlich kein Flash-Filmchen ein? Für solche Sachen wurde es ja wohl (auch) entwickelt.
            Die Verbreitung von Flash ist auch groß genug. Wer Flash deaktiviert hat, der wille solche "Spielereien" wahrscheinlich eh nicht sehen

            Benne

            1. Hi Benne,

              das Problem ist, wenn Flash ausgeschaltet ist, sieht der Benutzer einen hässlichen weißen oder grauen Kasten. Bei deaktiviertem JavaScript hat er dann halt ein statisches Bild, welches das Layout nicht zerstört.

              Viele Grüße
              Ben

              1. Hi Ben,

                das Problem ist, wenn Flash ausgeschaltet ist, sieht der Benutzer einen hässlichen weißen oder grauen Kasten. Bei deaktiviertem JavaScript hat er dann halt ein statisches Bild, welches das Layout nicht zerstört.

                meiner Meinung nach, ist das immer noch eine bessere Lösung, als das Bild mit JavaScript zu faden.

                Gruß,
                Benne

                1. Hi Benne,

                  wieso denn? Wo liegt da der klare Vorteil? Ich finde es angenehmer, wenn leute mit ausgeschaltetem Feature trotzdem wenigstens etwas sehen und keinen widerlichen Kasten dort vorfinden oder? ;-)

                  Viele Grüße
                  Ben

                  1. Moin Moin !

                    wieso denn? Wo liegt da der klare Vorteil? Ich finde es angenehmer, wenn leute mit ausgeschaltetem Feature trotzdem wenigstens etwas sehen und keinen widerlichen Kasten dort vorfinden oder? ;-)

                    Javascript macht dem Surf-PC relativ viel Arbeit (ja, auf einem GHz-System merkt man das nicht mehr!), weil es interpretiert wird. Ein statisches Bild bremst dagegen nicht. Besonders störend sind lange laufende Schleifen, weil der Browser dann oft recht träge reagiert.

                    Warum nimmst Du nicht ein animiertes GIF, das in -- sagen wir mal -- 20 Stufen von Bild 1 zu Bild 2 überblendet, und in genausoviel Stufen wieder zurück nach Bild 1 (falls gewünscht), und dann das Überblenden wiederholt (falls gewünscht) ? Das ist wahrscheinlich nicht wesentlich größer als die zwei Einzelbilder und funktioniert auch ohne JS und Flash-Plugin. Ein gutes Gif-Animations-Programm (was für ein Wort) erkennt identische Bildteile und "packt" das Bild, indem unveränderte Teile nicht doppelt in der Datei landen. Antike Browser, die mit animierten GIFs nichts anfangen können, zeigen immer noch das erste Bild.

                    Alexander

                    --
                    Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so!"
                    1. Hi Alexander,

                      kannst du mir denn da ein gutes Programm empfehlen? Wüsste sonst nicht, wie ich das mit geringer Dateigröße hinkriegen sollte...

                      Viele Grüße
                      Ben

                      1. Moin Moin !

                        Hi Alexander,

                        kannst du mir denn da ein gutes Programm empfehlen? Wüsste sonst nicht, wie ich das mit geringer Dateigröße hinkriegen sollte...

                        Die Dateigröße dürfte sehr davon abhängen, wie ähnlich sich die Bilder sind. Der "Animation Shop 3" von Jasc (Paint Shop Pro) kann GIFs nach Ähnlichkeit "packen". http://www.jasc.com/ -- Der Download ist ca. 11 MBytes groß, 30-Tage-Demo.

                        Ob andere Programe das auch können, weiß ich nicht. So selten, wie ich animierte GIFs brauche, reicht es mir zu wissen, daß AS3 alles kann, was ich brauche.

                        Alexander

                        --
                        Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so!"
                        1. Hi Alexander,

                          danke für den Tipp. Werde ich mir mal ansehen und es testen. Vielleicht ist das dann wirklich sinn- und nutzvoller.

                          Viele Grüße
                          Ben

  2. Sagt dir das Programm Swish etwas? Ist Flash für Arme und gibt es für 50$ (zumindest, als ich es mir vor einem Jahr kaufte). Ist sehr einfach zu bedienen, kein großer Einarbeitungsaufwand. Bei www.klett-ingenieur-gmbh.de kannst du so ein Beispiel, wie du es suchst, einmal anschauen. Damit geht es sehr einfach.

    Martin

    Hallo,

    ich soll auf einer Homepage einen Fading-Effekt mit mehreren Bildern, wie eine Diashow mit Überblendungen, einbauen (ich weiß, dass dies wahrscheinlich mal wieder nur mit dem IE sichtbar sein wird). Könnte mir da vielleicht jemand einen Denkansatz geben, denn ich weiß nicht wirklich wo ich anfangen soll...

    Danke im Voraus,
    Ben

    1. Hi Martin,

      ja Swish kenne ich auch, wollte nur gern eine JavaScript-Alternative, weil ich bei abgeschaltetem Flash im Gegensatz zu abgeschaltetem JavaScript einen hässlichen grauen oder weißen Kasten erhalte...

      Trotzdem danke und viele Grüße
      Ben

  3. Hallo Ben,

    ich soll auf einer Homepage einen Fading-Effekt mit mehreren Bildern, wie eine Diashow mit Überblendungen, einbauen (ich weiß, dass dies wahrscheinlich mal wieder nur mit dem IE sichtbar sein wird). Könnte mir da vielleicht jemand einen Denkansatz geben, denn ich weiß nicht wirklich wo ich anfangen soll...

    Die Idee mit dem AnimGif ist nicht schlecht. Falls Du auch noch an einem JS interessiert bist: http://www.designplace.org/scripts.php?page=1&c_id=19
    Funktioniert in IE, MOZ, NS6+
    Ansonsten halt mal googeln mit: javascript "image fading" da kriegst Du noch haufenweise was.

    Grüße aus Nürnberg,
    HarryS