PNG Transparenz im IE bei verschachtelter Slideshow?
0 Guten Appetit!
Felix Riesterer
0 0 0
PNG Transparenz im IE bei verschachtelter Slideshow?
Hallo SELFHTML-Gemeinde,
momentan versuche ich eine Slideshow in einer Slideshow mittels jQuery und dem cycle-Plugin zu erstellen. Das sieht in etwas so aus (Beispiel-Seite):
Slideshow 1
| Slide 1.1
|- Slideshow
|- Bild
|- Bild
|- Slideshow 1.1 Bild
| Slide 1.2
...
In der inneren slideshow sind PNG Bilder mit transparentem Hintergrund.
Der Wechsel der inneren Slideshow funktioniert im IE7/8. Sobald aber ein Wechsel der Äußeren Slideshow durchgeführt wird, wird der transparente Hintergrund weiß angezeigt.
Die ganzen Fixes aus dem Stackoverflow-Thema habe ich schon versucht. Leider ohne Erfolg.
Weiß jemand vielleicht warum die Transparenz beim Wechsel der Äußeren Slideshow nicht funktioniert und wie man das Problem behben kann?
Viele Grüße
Perpatuum
PS: Mein HTML-Code sieht so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#outerSlideshow').cycle({delay: 1000, speed: 1000, timeout: 4000}); // ,cleartype: true, cleartypeNoBg: true
$('#innerSlideshow').cycle({delay: 1000, speed: 1000, timeout: 2000, cleartypeNoBg: true}); // , cleartype: true, cleartypeNoBg: true
});
</script>
</head>
<body>
<div style="position: relative;">
<div id="outerSlideshow" style="height: 600px; position: absolute; z-index: 0">
<div style="width="1200px; height: 600px">
<div id="innerSlideshow" style="height: 600px; position: absolute; top: 100px; left: 100px; z-index: 1;">
<div id="slide1">
<img src="slide_1.png" />
</div>
<div id="slide2">
<img src="slide_2.png" />
</div>
</div>
<img src="bg_1.jpg" />
</div>
<div style="width=1200px; height: 600px;">
<img src="bg_2.jpg" />
</div>
</div>
</div>
</body>
</html>
-
Liebe(r) Perpetuum,
PS: Mein HTML-Code sieht so aus:
DIV-SUPPE!!! Und wo ist der Löffel dazu...?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
Hi,
Der Wechsel der inneren Slideshow funktioniert im IE7/8. Sobald aber ein Wechsel der Äußeren Slideshow durchgeführt wird, wird der transparente Hintergrund weiß angezeigt.
ja, richtig. Herzlich willkommen in der Erkenntnis, dass IE 7 und 8 auch nur verkappte IE 6 sind.
Weiß jemand vielleicht warum die Transparenz beim Wechsel der Äußeren Slideshow nicht funktioniert
Weil der IE die PNG-Transparenz nur simuliert und diese Simulation an einem Filter zerbricht.
und wie man das Problem behben kann?
Hmpf. IE<9 ausschließen? Anschlag auf Microsoft?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Weil der IE die PNG-Transparenz nur simuliert und diese Simulation an einem Filter zerbricht.
Und zwar so, dass bei der Schnittmenge zweier Alphatransparenzen einfach die Farbe angezeigt wird, die im PNG als Hintergrund definiert ist.
Der IE6 ist übrigens in diesem belangen nicht ganz so dämlich, der zeigt die Schnittmenge als vollständig transparent an - was zumindest hilft, wenn man zwei PNGs mit Alphatransparenz crossfadet.
-
-
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>Also das ist unhöflich - wenn du schon outsourcen willst, nimm ein CDN und klau nicht einfach den Traffic.
-
Das mit dem "Traffic-Klau" war keine Absicht. Ich habe mir die Datei nur lokal schnell zusammengeschrieben. Die URL ändere ich natürlich.
Bedeutet dies, dass es keine Lösung für dieses Problem gibt?
-
Hi,
Bedeutet dies, dass es keine Lösung für dieses Problem gibt?
gib den betreffenden IEs statt der PNG- einfach GIF-Grafiken (oder 8-Bit-PNG, welches in Sachen Transparenz einem GIF entspricht). Das ist zwar nicht schön, dürfte aber jemandem, der freiwillig einen IE8 verwendet, auch nicht weiter auffallen. Und wer es unfreiwillig tut - nun, der dürfte ohnehin unter erlernter Hilflosigkeit leiden.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Das mit dem "Traffic-Klau" war keine Absicht. Ich habe mir die Datei nur lokal schnell zusammengeschrieben. Die URL ändere ich natürlich.
Bedeutet dies, dass es keine Lösung für dieses Problem gibt?
Ich hab' so eine Sache (mehrere Slideshows ineinander) bereits umgesetzt (mit dem jQuery-Cycle-Plugin) - es ist PITA :)
Die Live-Seite kann ich nicht herzeigen - prinzipiell funktioniert das aber so:
Die äußere Slideshow läuft durch, die darunterliegenden Slideshows starten nicht automatisch sondern haben einen Play-Button der erstmal gedrückt werden muss.
Sobald man einen der Play-Buttons drückt, wird die äußere Slideshow gestoppt und man kann nur noch manuell blättern. Die innere läuft entsprechend los.
Klickt man in der äußeren Slideshow weiter, wird die innere entsprechend angehalten (die animation springt zum Ende) und die äußere tut ihr Ding.
Anders ist es nur möglich, wenn du auf PNG-Files verzichtest und einfach z.B. JPG verwendest.
-