Jeena Paradies: Alpha Image Loader von Listapart

Hallo,

Ich habe auf http://jeenaparadies.servebeer.com/open/Webs/jeenasbannerbude/" dieses Bannertauschsystem nach der Kritik angepasst und verbessert (bin noch nicht ganz fertig). Dort habe ich auch ein transparentes png benutzt welches den Hintergrund durchscheinen lässt und somit der Seite ein wenig dreitemensionalität verleiht.

Leider packt ja der IE keine 24bit alphatransparenten Bilder mittels den <img..> Tags. Aber es gibt ja diesen alphaImageLoader von MS. Auf http://www.alistapart.com/articles/pngopacity/ haben sie vorgeschlagen wie man das mittels JS am besten hinkriegen könnte. Genau so habe ich das dann mittels copy&paste kopiert und in meine Seite eingesetzt. Der JS Code ist ausgelagert http://jeenaparadies.servebeer.com/open/Webs/jeenasbannerbude/scripts/iepng.js und in die Seite mittels src="... eingefügt.

Wenn ich das Ding laufen lasse bekomme ich folgende Fehler angezeigt:
----------------------------

http://jeenaparadies.servebeer.com/open/Webs/jeenasbannerbude/scripts/iepng.js
Unknown context
Syntax error while loading (line 7)
 |
----^

Inline script thread
Error:
name: ReferenceError
message: Statement on line 1: Reference to undefined variable: No such variable 'od_displayImage'
Backtrace:
  Line 1 of inline#1 script in http://jeenaparadies.servebeer.com/open/Webs/jeenasbannerbude/
    od_displayImage("maskottchen", "img/maskottchen", 177, 230, "maskottchen", "maskottchen");

----------------------------

Wenn ich dann alle | nebeneinander mache dann gibt es zwar keinen Fehler aber mein Opera 7.5 zeigt mir dann das alternative gif Bild an welches ja diese Treppchen beinhaltet welche ich nicht haben will.

Irgendwie steige ich bei diesem Ding nicht durch und würde mich freuen wenn sich das jemand mal angucken würde und mir sagen würde was ich da eventuell falsch gemacht habe.

Grüße
Jeena Paradies

--
Jeenas Welt in ein paar Sätzen:
http://www.jeenaparadies.de/artikel/
  1. Hallo,

    kleiner Nachtrag es soll so aussehen wie im Opera und Mozilla ohne JavaScript.

    Grüße
    Jeena Paradies

    --
    Jeenas Welt in ein paar Sätzen:
    http://www.jeenaparadies.de/artikel/
  2. Moin,

    Genau so habe ich das dann mittels copy&paste kopiert und in meine Seite eingesetzt. Der JS Code ist ausgelagert http://jeenaparadies.servebeer.com/open/Webs/jeenasbannerbude/scripts/iepng.js und in die Seite mittels src="... eingefügt.

    Dass || ein Javascript-Operator ist, den man sinnvollerweise nicht trennt, ist dir klar?

    Ansonsten: Der Code ist mir zu wüst da habe ich jetzt keine Lust tiefer reinzuschauen. Ich fand für die PNGs im IE http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html einen sehr schönen Ansatz.

    --
    Henryk Plötz
    Grüße aus Berlin
    ~~~~~~~~ Un-CDs, nein danke! http://www.heise.de/ct/cd-register/ ~~~~~~~~
    ~~ Help Microsoft fight software piracy: Give Linux to a friend today! ~~
    1. Hallo,

      Dass || ein Javascript-Operator ist, den man sinnvollerweise nicht trennt, ist dir klar?

      Jetzt ist es mir klar, danke.

      Ansonsten: Der Code ist mir zu wüst da habe ich jetzt keine Lust tiefer reinzuschauen. Ich fand für die PNGs im IE http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html einen sehr schönen Ansatz.

      Ich habe den Code jetzt mal aufgeräumt. Ich gucke mir aber jetzt erst mal deinen Link an. Danke.

      Grüße
      Jeena Paradies

      --
      Jeenas Welt in ein paar Sätzen:
      http://www.jeenaparadies.de/artikel/
      1. Hallo,

        Ich fand für die PNGs im IE http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html einen sehr schönen Ansatz.

        Das Problem bei dem Teil ist dass es nur den IE 5.5+ Win bedient und auf keine anderen Browser rücksicht nimmt. Außerdem wird auch nichts angezeigt wenn JS abgeschalten ist.

        Das andere Script funktioniert schon fast nur dass es bisher immer nur das .gif Bild anzeigt.

        Grüße
        Jeena Paradies

        --
        Jeenas Welt in ein paar Sätzen:
        http://www.jeenaparadies.de/artikel/
        1. Hallo,

          Sorry jetzt habe ich es noch zwei mal durchgelesen und so langsam kapiere ich wie es funktioniert. Es stimmt gar nicht was ich im oberen Posting geschrieben habe. Ich werde es jetzt auf jeden fall mal susprobieren. Noch mal danke.

          Grüße
          Jeena Paradies

          --
          Jeenas Welt in ein paar Sätzen:
          http://www.jeenaparadies.de/artikel/
        2. Moin,

          Das Problem bei dem Teil ist dass es nur den IE 5.5+ Win bedient und auf keine anderen Browser rücksicht nimmt. Außerdem wird auch nichts angezeigt wenn JS abgeschalten ist.

          Noe, das ist ja das schöne: Der Code bleibt genau so wie er ist, d.h. jeder Browser zwischen hier und dem Jenseits stellt das Bild so dar wie er es kann. Aber durch ein bisschen zusätzlichen Code (den normale Browser nicht sehen),  wird das Bilder für den Win IE 5.5+ dynamisch versteckt und stattdessen über den AlphaImageLoader eingebaut.
          Ganz im Gegenteil: Die Lösung die da bei ala angeboten wird geht nur mit wenigen Browsern und ist (IMHO) überaus hässlich.

          Das andere Script funktioniert schon fast nur dass es bisher immer nur das .gif Bild anzeigt.

          Das _könnte_ daran liegen dass du die Hälfte vergessen hast? Richte dein Auge doch mal auf den Source von http://oaksanderson.com/opacity/examples/ex1.htm. Beachte insbesondere die Anzahl der <script src...>-Elemente. Und sieh dir den Inhalt der verlinkten Ressourcen an. (So nebenbei ersparst du dir dann Fehler beim Copy'n'Paste.)

          --
          Henryk Plötz
          Grüße aus Berlin
          ~~~~~~~~ Un-CDs, nein danke! http://www.heise.de/ct/cd-register/ ~~~~~~~~
          ~~ Help Microsoft fight software piracy: Give Linux to a friend today! ~~
          1. Hallo,

            Hm jetzt habe ich alles so wie auf http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html beschrieben eingefügt aber ganz funktioniert es noch nicht. Es funktioniert bei allen Browsern wie erwartet nur beim IE 5.5+ wird gar kein Bild angezeigt.

            http://jeenaparadies.servebeer.com/open/Webs/jeenasbannerbude/
            Ich habe das blind.gif und die .htc Datei in das css Verzeichniss reinkopiert und beim img im CSS behavior: url("pngbehavior.htc"); eingefügt. Was habe ich noch übersehen?

            Grüße
            Jeena Paradies

            --
            Jeenas Welt in ein paar Sätzen:
            http://www.jeenaparadies.de/artikel/
            1. Hallo,

              Es funktioniert jetzt seit dem ich style="width: 177px; height: 230px;" eingefügt habe. Vielen vielen Dank.

              Grüße
              Jeena Paradies

              --
              Jeenas Welt in ein paar Sätzen:
              http://www.jeenaparadies.de/artikel/
  3. Hey,

    Vielleicht siehste dir auch mal diese Seite an:
    http://redvip.homelinux.net/varios/explorer-png-en.html
    (Leider nur noch über den Google-Cache: http://google.de/search?q=explorer-png-en)

    Hier werden verschieden Lösungen vorgestellt. Der .HTC-Ansatz ist
    vielleicht sogar der beste - macht am wenigsten Mühe und stört die
    richtigen Browser nicht.

    MsF,
    milky