PNG tranparantie in IE en FF

Handig om te weten, maar niet echt een heel uitgebreide tutorial...

Zeker handig om te weten, alleen zou je het niet beter zo kunnen doen in je CSS-file:
#png {
background-image:url(locatie/naamplaatje.png);
background-repeat:no-repeat;
}

*html #png { fillter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=locatie/naamplaatje.png'); }

Dingen die vooraf worden gegaan door *html kunnen volgens mij alleen door IE worden gelezen. In fatsoenlijke browsers wordt zo'n element gewoon genegeerd, dus zal daar niets gebeuren en zal IE de achtergrond vervangen door een echt transparant plaatje.

Dan heb je die hele browsercheck niet meer nodig...

Edit:
Ik denk trouwens dat er een type in je tutorial staat. Ik heb het niet getest ofzo, maar het zal wel filter met 1 L moeten zijn bij die IE-hack toch?

mooi artikel,

die browsercheck van je is wel een beetje omslachtig vind ik.
dit doet het zelfde maar met minder code:



daar waar $browser staat vervang je dan door 'MSIE' of 'Gecko' of whatever :).. geeft true weer als het een match vind.

ik zal er thuis even induiken, als het makkelijker kan dan vermeld ik dat hier natuurlijk :)

Heb deze tut trouwens gemaakt, omdat er nog niet echt nederlandse voor waren, maar goed das allemaal bij-info :)

@jordi, dat met html ervoor werkt niet, dan krijg je in IE twee plaatjes over elkaar heen te zien.

<!--[if IE]>
<style>
#png { fillter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=locatie/naamplaatje.png'); }
</style>
<![endif]-->

IE-only comments, werkt bij iedere IE.

En de specific versie:
<!--[if gte IE 5]>
<style type="text/css">
</style>
<![endif]-->

bestaat er ook zulke code voor in een stylesheet zelf?

De comments die ik beschreef zijn alleen voor (X)HTML en alleen voor Internet Explorer. Alle andere browsers (voorzover ik weet) zien het gewoon als een comment, en doen er verder niets mee.

Misschien heb je hier wat aan...

jazekers interessant :D

Maar ik bedoelde, al mijn css staat in 1 bestand. Kan je bovenstaande if's dan gewoon gebruiken?

Waarschijnlijk niet :p

Is het niet handiger om gewoon je stylesheet door php te laten genereren?

hmm ik wist niet eens dat dat kon :S
lol domme ik

Je zal het niet leuk vinden dat ik naar een andere site verwijs, maar deze manier is iets simpeler, en juister:
http://www.websitemaken.be/index.php?page=show_item&id=578

bovendien is filter:progid: [etc] geen juiste CSS.

Dat klopt niet. Zo krijg je in IE geen transparante achtergrond. Dat is gewoon andere css voor een andere browser. Dat is ook wel handig:

#png {
background-image:url(locatie/naamplaatje.png);
background-repeat:no-repeat;
}

*html #png { fillter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=locatie/naamplaatje.png'); }


Zoals Jordie opmerkte

het enige probleem is dat ik dan twee png'tjes over elkaar lijk te zien.

Peoples, ik snap het niet helemaal. Hoe zorg ik er nu voor dat de png class wordt toegepast op een bepaalde css tag. Vanwaar de # bij #png en niet .png, dat ben ik eigenlijk gewent.

Wat ik graag wil is een png met transparantie gebruiken als achtergrondafbeelding van een tabel. Omdat de achtergrond van de pagina een patern is kan ik niet volstaan met een matte achter een gif. Als je begrijpt wat ik bedoel.

Iedere tip is welkom...

Hmm, voor die brozercheck prefereer ik zelf toch de 'if IE - tag'. Ook handig op niet php pagina's (-;

Het volgende heb ik weten te vergaren en te combineren.

Dit komt tussen de Head tags:

<!--[if IE]>
<script language="JavaScript" src="js/PngIeHack.js" type="text/JavaScript">
</script>
<![endif]-->


Volgende script in bestand "PngIeHack.js" opslaan in directory "js".


window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);

function correctPNG() // correctly handle PNG "IMG Element" transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images
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
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}

function alphaBackgrounds() // correctly handle PNG "BACKGROUNDCOLOUR" transparency in Win IE 5.5 or higher.
{
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all.currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
document.all.style.backgroundImage = "url('/images/1pixel.gif')";
}
}
}
}


Bij mij werkt het goed voor <img src="....png"/ > en CSS: background-image: url(../images/....png); !!

Firefox gaat er niet van over zijn nek.
Hoe het op Apple eruit ziet mij een raadsel, wellicht dat iemand uitsluitsel kan geven.
Ik ben geen javascript held dus de twee functies in een combineren zou ook mogelijk moeten zijn maar ook mogelijk dat er mensen zijn die prijs stellen op afzonderlijke functies voor image objecten en CSS backgrounds.

mvg,
Jeroen Haan
www.haan.net

Ziet er op Mac heel goed uit, behalve in Internet Explorer. Maar ja, ik vraag me af of iemand die nog gebruikt op Mac.

Na uren zoeken op allerlei websites is dit javascript de meest complete oplossing,
bedankt!

er is een probleem met dat javascript..als je namelijk de png in een div plaatst dan rekt hij zichzelf uit.................

wewerwe werwe

Dat klopt, dat is nog een onvolkomenheid. Ik heb nog niet de energie en tijd gehad om hier serieus naar te kijken. Iemand anders misschien?
Maar door de afmetingen van de background image te laten 'passen' dus bijv. een <div> van 100px bij 100px EN een background image van 100px bij 100px kan je dit ondervangen.
Tenzij het achtergrondje toch herhaald cq uitgerekt moest worden naar ??n richting of twee richtingen in geval van een 1 x 1 pixel PNG met een percentage transparantie....
maw. als je een image wil laten herhalen (repeat-x of repeat-y) zorg je gewoon dat de lengte of breedte van dat plaatje overeenkomt met de lengte of breedte van de <div> of welk ander block element... In FireFox zal het herhalen van de PNG wel lukken, Explorer rekt hem gewoon uit. het effect zou hetzelfde moeten zijn.

succes!

die javascript oplossing werkt goed, alleen een groot probleem bij mij:
als ik backgroundimages door css zo laad, dan kan ik niet meer aan links of niks... de png komt ahw bovenop alles te liggen zodat ik niets meer kan aan klikken, en dit enkel in IE natuurlijk.

Betreft enkele onvolkomenheden in het script.

Dit filter komt twee keer voor in het script: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='"+mypng+"', sizingMethod='crop')";
De functionaliteit is ontleent aan de Power Point web exports...

http://msdn.microsoft.com/workshop/author/filter/reference/properties/sizingmethod_1.asp
Laat duidelijk de beperkingen zien.

*crop:
Plaatje wordt bijgesneden als niet past in "block" object (layer/div tags) en als wel past linksboven in object geplaatst.

*image:
Block object vouwt zich om plaatje heen, heeft dus zelfde afmetingen als plaatje.

*scale:
plaatje wordt geschaald naar Block Object afmetingen.

Maw. je kan het plaatje niet plaatsen anders dan links boven in het object.

Jeroen Haan
website developer / ICT consultant
www.haan.net

Misschien prettig om te weten dat het filter geen relatieve path names accepteert.

bovenstaand javascript geeft problemen met mijn scrollbar. te weten: niet meer functioneren. heeft iemand hier een oplossing voor. de fout met de links <a> had ik zelf al gefikst.

Joost, bedoel je in het script of in de html code?
Ik heb er namelijk geen problemen mee of ik snap niet wat je bedoelt.
Welke versie van IE heb je?

Bart, ook hier de vraag welke versie van IE?
En hoe heb je dat <a> gefikst?

Als iemand een bug report doet graag je OS, client (IE, FF...) en versie nummer.
Graag specifiek zijn en als het kan, een stukje code meeplakken of een URL meegeven zodat we gemakkelijk mee kunnen kijken en eventueel voorkomen dat we energie gaan steken in een heel ander probleem.

Last but not least;
Als je denkt bovenstaande code te hebben verbeterd maw. een bug om zeep hebt geholpen, een uitbreiding hebt gemaakt of een slimmere methode whatever..., zou je dan zo vriendelijk willen zijn de aanpassing of de hele code te posten of een URL ter beschikking te stellen.

Dan krijg je meer uitwisseling en dus meer oplossingen.

cheers

Heb je problemen met hyperlinks die niet meer werken na het toepassen van de PNG hack, neem dan hier een kijkje:
http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217

Het gaat om:
Addendum: IE Link bug
Staat vlak boven de comments (onderaan de uitleg, bij mij twee schermhoogtes omlaag).

Ik heb zelf nog niet getest maar ben benieuwd naar jullie ervaringen.

de beste manier is gewoon CSS alleen dan IE en alle andere voor de gek houden:
/*ziet IE op windows niet want deze ondersteunt het > teken niet (IE MAC ziet dit wel)*/
html>body #png {
background-image:url(locatie/naamplaatje.png);
background-repeat:no-repeat;
}
/*ziet alleen IE*/
* html .png { fillter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=locatie/naamplaatje.png'); }

dit zou voor de meeste browser instellingen moeten werken
het enige wat mogenlijk niet werkt is IE MAC

er is vast een nog betere manier zonder javascript (want als je het uit zet werk het niet meer en CSS kun je niet uit zetten)
maar om die te maken moet je veel tijd hebben

dit is een foto waarvan ik de achtergrond tranparant heb gemaakt,
<img src="plaatje.png" alt="?" width="120" height="150"> en die word gewoon afgebeeld in IE zoals die gemaakt is zonder achtergrond dus, en zonder die al die poespas zoals boven staand script of css. dus snap ik er het nut niet van, of wilt u mij soms gaan wijs maken dat dat script gewone afbeeldingen omzet in een transparante afbeelding?
ach nee niek! sukkel dat kan toch niet want dan zou toch het hele plaatje transparant worden.
't zal wel aan mij liggen maar ik snap er geen bal van

sorry! maar ik heb het schijnbaar weer verkeerd. want die de afbeeldingen die ik bedoel komen wel met wamp5 in beeld maar niet in IE of FF en zijn gif afbeeldingen. maar dat zal wel een andere oorzaak hebben, want 1 gewoone foto.jpg doet het ook niet, terwijl de rest van de jpeg en png wel werken ook die waarvan ik de achtergrond heb gewist. ik heb ze binaire ge-upload en
ge-cmode naar 755 maar het resultaat is niks, nada, niente.

niek58, het is niet echt actueel he?
Het is alweer meer dan een jaar geleden dat ik mijn laatste berichtje hier neer heb gezet.
Toendertijd hadden wij IE 7 nog niet en moesten we het al wel 5 jaar met IE 6 doen die PNG transparantie niet volledig ondersteunde. Daar was dit script voor geschreven. Inmiddels hebben wij IE 7...
Ik begrijp trouwens weinig van je probleem.
Omschrijf het probleem zoals je wou willen dat een ander het zou doen. Want nu ontgaat mij elke logica. Geef als het kan ook een URL naar een online voorbeeld.

Trouwens, ik heb andere scriptjes ontwikkeld welke nu juist met IE 7 weer actueel zijn. Check ze zelf op www.haan.net/test/index.php

het is al opgelost ! stomme fout van mezelf. ik had afbeeldingen van internet geplukt zonder de naam te wijzigen dus met een hoofdletter, maar in het script met kleine letters geplaatst vandaar dat ze niet in beeld verschenen. alleen snap ik niet dat ik het wel te zien kreeg via localhost in Wamp5 server, is blijkbaar toch niet zo'n goed programma om te testen.

wie kan mij helpen?
ik ben geen php-er, maar ik heb wel een probleem die waarschijnlijk door een php-er kan worden opgelost.
Ik moet een ontwerp maken waarvan het content gedeelte half transparant moet zijn. Nu heb ik een halftransparant plaatje (PNG) als achtergrond afbeelding opgenomen in de container div en deze op repeat gezet. Dit werkt in FF, maar natuurlijk niet in IE.
Nu heb ik gezocht en heb ik de onderstaande oplossing gevonden
<div id="container" style="height:auto; width:800px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/tp.png', sizingMethod='scale'); "></div>
Dit werkt in IE, maar niet in FF.
Nu probeer ik het op te lossen door de code te verplaatsen naar die IE opmerking <!--[if IE]>. Dit werkt niet en ik heb *html #container geprobeerd. Als het bij FF werkt dan werkt het in IE niet.
Misschien stel ik voor de hand liggende vragen, maar ik ben geen php-er.
Wat doe ik fout en wie wil mij helpen?
gr. Sophie

Je kunt het simpel oplossen met conditional comments.

Als je dit in de head sectie van je document zet: