Alpha Image Loader von Listapart
Jeena Paradies
- javascript
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
Hallo,
kleiner Nachtrag es soll so aussehen wie im Opera und Mozilla ohne JavaScript.
Grüße
Jeena Paradies
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.
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
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
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
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.)
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
Hallo,
Es funktioniert jetzt seit dem ich style="width: 177px; height: 230px;" eingefügt habe. Vielen vielen Dank.
Grüße
Jeena Paradies
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