Transparente .png im IE - eine Lösung

[EEBKiller]

Öhm, und der Alpha-Kanal (also die Transparenz ist IM Bild festgelegt, nicht etwa durch CSS) ?

Das hieße ja, dass man nen komplexen Alpha-Kanal mit mehreren Stufen einbauen und man dadurch ein Pic basteln welches verscheidene transparenzen hat. - Goil

€DIT:

OMG, das funzt !

www.eeb-welt.de/alpha/

Der Rote Kreis ist ein Pic, bei dem von Innen nach aussen die Transparanz zunimmt. Der Hintergrund sind 4 Tabellenzellen

[Stealthman]

Woah is das geil...
Sven ich liebe dich

gleich ma ausprobieren...

[Sven]

Update:
Es gibt einen Bug im IE durch den Links über einem solchen transparenten Bild nicht mehr funktionieren!
Nur durch herumprobieren mit der Kachelgröße lässt sich das vermeiden - aber das ist bei jeder Site unterschiedlich.
Bei meinem aktuellen Projekt klappt es zB mit 4x1 Pixel, andere berichten von 2x2 oder auch 2x10 Pixel.

[WalnutXP]

Hallo leutz, ich wollte nur mitteilen dass ich den Alpha Image Loader schon seit längerer Zeit sehr erfolgreich einsetze.

Man kann dazu einfach diese Datei herunterladen. Dann braucht man dazu noch eine blank.gif. Beide Datein müssen ins Hauptverzeichnis der Homepage kopiert werden.

Anschließend in eurem CSS einfach folgendes einfügen:

img {
border-style: none;
behavior: url("pngbehavior.htc");
}

[Sven]

Naja, ich zieh es vor auf JavaScript weitgehend zu verzichten.
Lösungen mit JavaScript gibt's für die Problematik wie Sand am Meer.

Ich hab übrigens mittlerweile eine noch elegantere Möglichkeit gefunden:

background-image:url(/transp.png);
background:expression("none");
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transp.png', sizingMethod='scale', enabled=true);

[WalnutXP]

Soweit ich weiß macht obiges JavaScript das selbe, nur dass man dafür halt keine extra Klasse braucht. Interessant ist allerdings die Tatsache, dass es auch ausgeführt wird, wenn JavaScript deaktiviert ist.

[Sven]

Es gibt da noch ein kleines Problem.... Links auf derart vom IE dargestellten Hintergrundbildern funktionieren normalerweise nicht.
Abhilfe schaffen folgende Maßnahmen:
a) cursor: pointer für das zugehörige Element setzen (unbefriedigende Lösung)
b) Die Größe der Hintergrundkachel durch Herumprobiererei so setzen (zB 1x4 Pixel), daß der IE das futtert (unbefriedigend - aber brauchbare Ergebnisse)
c) a: {position: relative;} (löst sämtliche Probleme )