[png] welke browsers doen het niet?

[Verwijderd]

.

[ Voor 99% gewijzigd door Verwijderd op 31-10-2023 22:48 ]

[Arjan A]

Alpha-blending werkt in IE 6 iig niet, maar daar zijn workaround-scriptjes voor

[Verwijderd]

PNG werkt in IE/FF/O en nog veel andere browsers. Echter gaat de Alpha layer niet altijd goed (transparency). In IE wordt doorzichtig grijs (er is een ranzige hack om dat te verhelpen, iets met DIV's ofzo), sommige andere browsers ondersteunen alleen 0% en 100% alpha, dus geen half-doorzichtig.

[Verwijderd]

.

[ Voor 100% gewijzigd door Verwijderd op 31-10-2023 22:48 ]

[NMe]

[google=png browser compatibility], eerste hit.

[Verwijderd]

.

[ Voor 98% gewijzigd door Verwijderd op 31-10-2023 22:48 ]

[Verwijderd]

.

[ Voor 110% gewijzigd door Verwijderd op 31-10-2023 22:48 ]

[Devilfish]

Met tweakpng kun je de weergave in ie behoorlijk tweaken: http://entropymine.com/jason/tweakpng/ en http://www.phoenity.com/newtedge/png_degradability/

[leuk_he]

Verwijderd schreef op zondag 20 november 2005 @ 16:18:
Ok, dus transparancy is het enige probleem? Als ik .png zonder transparancy gebruik heb ik dus nergens problemen?

Inderdaad. Zo simpel is het. Simple transperantie wordt zelfs WEL al lang ondersteund. png is al gauw beter als gif tenzij het om foto's gaat.

meer hier:

http://www.libpng.org/pub/png/pngapbr.html

[ Voor 9% gewijzigd door leuk_he op 21-11-2005 00:05 ]

[Clay]

mwah, enige probleem ... IE interpreteert de kleuren van png's veel te donker (8 & 24). Maak maar eens een vergelijkings testje met een bg kleur via css, en een plaatje met dezelfde kleur in png.

[Johnvh]

Ik heb op mijn website (in aanbouw) ook transparante PNG's gebruikt.
De foute weergave in IE heb ik opgelost met de onderstaande lap code

code:

    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[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
         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[i].currentStyle.backgroundImage;
        if (itsAllGood && bg){
            if (bg.match(/\.png/i) != null){
                var mypng = bg.substring(5,bg.length-2);
                document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
                document.all[i].style.backgroundImage = "url('/images/1pixel.gif')";
            }
        }
    }
}

Werkt prima!