Transparante PNG in IE met behulp van filter

[posttoast]

Ik ben een beetje aan het knutselen en loop tegen een probleem. Ik heb een div met als achtergrond een semi-transparant PNG plaatje. In FireFox werkt het perfect, nu IE nog. Na wat zoekwerk kwam ik erachter dat dit zou moeten helpen:

Cascading Stylesheet:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/field_main_bg.png',
sizingMethod='scale');

Dat werkt dus mooi niet. Na een leuke waarschuwing van IE dat er ActiveX content op de pagina staat (die ik vervolgens allow) krijg ik gewoon een wit vlak en geen transparantie.

Iemand enig idee of dit überhaupt kan in Internet Explorer 6 SP2?

Voor de volledigheid nog even de complete CSS van het divje:

Cascading Stylesheet:

position: absolute;
width: 600px;
height: auto;
left: 200px;
top: 165px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/field_main_bg.png',
sizingMethod='scale');
background-image: url(images/field_main_bg.png);
background-repeat: repeat;
border: 1px solid #000000;

[André]

Tja, wil je het echt op zo'n rare manier? IE en PNG+Alphachannel gaan gewoon niet samen. Kun je het niet met een gifje oplossen?

[knopper]

Ik gebruik er zelf een javascriptje voor die ik ergens had gevonden. Werkt prima.

Heb de code even voor je opgesnord:

JavaScript:

<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
var imgAttribs = img.attributes;
for (var j=0; j<imgAttribs.length; j++)
{
var imgAttrib = imgAttribs[j];
if (imgAttrib.nodeName == "align")
{
if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
break
}
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle
strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>

[André]

Staat hier overigens ook niets tussen?

PNG probleem IE -> oplossing en petitie
[rml][ png] wil niet doorzichtig...[/rml]
PNG
[rml][ BC3] PNG webicon, niet mogelijk?[/rml]
PNG files....
PNG vraag
Graphix: Portable Network Graphic
Internet Exploder v.s. mozilla : PNG
internet explorer verpest kleuren?
[rml][ MSIE] Full PNG support (petitie)[/rml]
[rml][ css] IE-filters toepassen op PNG met alpha in IE 6[/rml]
[rml][ IE vs. Mozilla] Transparency van plaatjes[/rml]

En die oplossing die hierboven genoemd word wil je toch niet voor een plaatje

[ Voor 7% gewijzigd door André op 17-11-2004 14:58 ]

[posttoast]

Knopper, tnx voor het script. Ik ga het straks even proberen.

André schreef op woensdag 17 november 2004 @ 14:57:
Staat hier overigens ook niets tussen?

PNG probleem IE -> oplossing en petitie
[rml][ png] wil niet doorzichtig...[/rml]
PNG
[rml][ BC3] PNG webicon, niet mogelijk?[/rml]
PNG files....
PNG vraag
Graphix: Portable Network Graphic
Internet Exploder v.s. mozilla : PNG
internet explorer verpest kleuren?
[rml][ MSIE] Full PNG support (petitie)[/rml]
[rml][ css] IE-filters toepassen op PNG met alpha in IE 6[/rml]
[rml][ IE vs. Mozilla] Transparency van plaatjes[/rml]

En die oplossing die hierboven genoemd word wil je toch niet voor een plaatje

Nee, in al die topics staat niet de oplossing. Helaas... Er wordt vooral heel erg geklaagd over het gebrek aan PNG ondersteuning, maar daar ben ik al lang van op de hoogte. Jammer genoeg zit ik wel 'vast' aan de grote groep IE gebruikers die er nog is, dus ik zal toch echt een oplossing moeten verzorgen. Als die oplossing bestaat uit een flink javascript dan is dat nou eenmaal zo.

[E-jey]

Bedankt knopper! Ik heb had ook het probleem met de transparante png bestanden. Het script werkt prima

[Thralas]

Hier staat ook een oplossing beschreven met behulp van PHP.

[Rowanov]

En hier waarschijnlijk ook; http://homepage.ntlworld.com/bobosola/pnghowto.htm

Vincent Bovelander schreef op woensdag 17 november 2004 @ 15:04:
Nee, in al die topics staat niet de oplossing. Helaas... Er wordt vooral heel erg geklaagd over het gebrek aan PNG ondersteuning, maar daar ben ik al lang van op de hoogte. Jammer genoeg zit ik wel 'vast' aan de grote groep IE gebruikers die er nog is, dus ik zal toch echt een oplossing moeten verzorgen. Als die oplossing bestaat uit een flink javascript dan is dat nou eenmaal zo.

Vrij weinig kans dat het daar niet tussen staat, ik post deze link voor dit probleem gemiddeld 1 keer per week.

[posttoast]

Jammer genoeg zijn dit allemaal geen echte oplossingen voor mijn probleem. Het zijn allemaal workarounds voor wanneer er <img>'s gebruikt worden, maar zodra het om een background-image in een CSS gaat werkt het niet meer... Het lijkt erop dat dit gewoon niet kan en ik dus op een 'vieze' manier mijn pagina moet gaan maken om het ook in IE te laten werken.

Wacht: ik roep te vroeg! Misschien dat de PHP oplossing wel gaat werken, ik laat het zo horen.

Edit 2: nee dus, dat werkt helaas ook niet... Vreemd, want het zou wel moeten werken.

[ Voor 28% gewijzigd door posttoast op 17-11-2004 16:32 ]

[Rowanov]

Bouw dan een div met het plaatje er in met nog een div met je content eroverheen, gebruik makend van z-index.

[posttoast]

Rowanov schreef op woensdag 17 november 2004 @ 17:13:
Bouw dan een div met het plaatje er in met nog een div met je content eroverheen, gebruik makend van z-index.

Dat wordt lastig aangezien het om een div gaat die met de content mee moet kunnen rekken. Een transparante background-color is dus ook geen optie.

[ Voor 6% gewijzigd door posttoast op 17-11-2004 17:19 ]

[Verwijderd]

Vincent Bovelander schreef op woensdag 17 november 2004 @ 14:49:
Ik ben een beetje aan het knutselen en loop tegen een probleem. Ik heb een div met als achtergrond een semi-transparant PNG plaatje. In FireFox werkt het perfect, nu IE nog. Na wat zoekwerk kwam ik erachter dat dit zou moeten helpen:

Cascading Stylesheet:

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/field_main_bg.png',
sizingMethod='scale');

Dat werkt dus mooi niet. Na een leuke waarschuwing van IE dat er ActiveX content op de pagina staat (die ik vervolgens allow) krijg ik gewoon een wit vlak en geen transparantie.

Iemand enig idee of dit überhaupt kan in Internet Explorer 6 SP2?

Voor de volledigheid nog even de complete CSS van het divje:

Cascading Stylesheet:

position: absolute;
width: 600px;
height: auto;
left: 200px;
top: 165px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/field_main_bg.png',
sizingMethod='scale');
background-image: url(images/field_main_bg.png);
background-repeat: repeat;
border: 1px solid #000000;

Dat is helemaal leip, want ik heb het precies andersom. Bij mij werkt het in IE wel en in Firefox juist niet. Alleen heb ik het niet in een style sheet, maar gewoon in de code zelf, wat volgens mij weinig uit maakt.

Dit is de code die ik gebruik in m'n php pagina:
- spacer.gif is een plaatje van 1x1 px die transparant is
- plan.png is het werkelijke transparante png'tje

PHP:

<img
src='images/spacer.gif'
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/plan.png', sizingMethod='image')">
</img>

[ Voor 5% gewijzigd door Verwijderd op 12-12-2004 12:49 ]

[Switch]

Volgens mij is dat filter-goedoe IE only hoor Voor Firefox kan je volgens mij -moz-opacity gebruiken oid. (http://www.domedia.org/oveklykken/css-transparency.php)

[ Voor 21% gewijzigd door Switch op 12-12-2004 13:02 ]

[Genoil]

ik gebruik ie-png.htc daarvoor. werkt als een tiet, ook voor CSS background-images en is volledig transparant voor niet-Win-IE browsers. Ik had alleen wat probleempjes met paden:

Cascading Stylesheet:

/* this selector has to be in a file in the same dir as the html files where it is referenced from, otherwise the ie-png script won't run... */
.png {
    behavior:url(style/ie-png.htc);
    -ie-png-blankimage: url(style/blank.gif);
}

Verder is het wel handig om te weten dat het DX filter niet werkt voor repeterende backgrounds, hij kan alleen stretchen en croppen, niet repeaten...

[ Voor 20% gewijzigd door Genoil op 12-12-2004 13:40 . Reden: eerdere edit weer ge-undo'ed ]

[Guillome]

? Waarom is het zo lastig om een png te gebruiken?
Sla de Png in photoshop op met de Save for web optie. Kies Png 8bit en alles werkt als een tiet

edit: werkt alleen denk ik dan in XP SP 2. Hier werkt het niet meer, op mn stage wel.
zou moeten werken dan in XP SP 2

[ Voor 42% gewijzigd door Guillome op 12-12-2004 13:56 ]

[Genoil]

XLerator schreef op zondag 12 december 2004 @ 13:47:
? Waarom is het zo lastig om een png te gebruiken?
Sla de Png in photoshop op met de Save for web optie. Kies Png 8bit en alles werkt als een tiet

het gaat hier over PNG's met alpha kanaal (24 + 8 bits)

[Verwijderd]

Misschien een rare vraag maar waarom geen GIF?? Photoshop maakt de beste GIF plaatjes. Zien er vaak zelfs beter uit als grote JPG's

[Verwijderd]

Switch schreef op zondag 12 december 2004 @ 13:02:
Volgens mij is dat filter-goedoe IE only hoor Voor Firefox kan je volgens mij -moz-opacity gebruiken oid. (http://www.domedia.org/oveklykken/css-transparency.php)

Hier wordt er gewerkt met opacity, dus het gehele plaatje wordt 50% transparant gemaakt. Dat is anders dan hoe een png of gif zou moeten werken...

[Verwijderd]

Genoil schreef op zondag 12 december 2004 @ 13:36:
ik gebruik ie-png.htc daarvoor. werkt als een tiet, ook voor CSS background-images en is volledig transparant voor niet-Win-IE browsers. Ik had alleen wat probleempjes met paden:

Cascading Stylesheet:

/* this selector has to be in a file in the same dir as the html files where it is referenced from, otherwise the ie-png script won't run... */
.png {
    behavior:url(style/ie-png.htc);
    -ie-png-blankimage: url(style/blank.gif);
}

Verder is het wel handig om te weten dat het DX filter niet werkt voor repeterende backgrounds, hij kan alleen stretchen en croppen, niet repeaten...

FET, na al die jaren..... DIT ZOCHT IK MAN Dé oplossing voor niet png ondersteunende browsers

Mozilla en IE compatible, fusie a la scripting...

Vielen Dank für das