[JS / CSS] PNG Tranparency voor background images in IE

[Verwijderd]

hey mensen,

Ik ben voor school bezig met een website waarin we schaduwrandjes om tabellen willen zetten. Dit zijn plaatjes in PNG-24 met transparency zodat het niet uitmaakt welke achtergrond kleur je hebt.

Nu heb ik al dit gevonden. Dit script zet alle <IMG> in de html al om.

code:

function correctPNG() 
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      alert(imgName)
      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
         }
      }
   }

Maaaar, als je plaatjes gebruikt in je css of in de style van je tabel:
<td background="images/shadow_v.png" style="background-repeat: repeat-y;"></td>

dan werkt het script niet, en om nou overal in elke style "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader..." toe te voegen is ook weer zo een werk.

De vraag: Is er een manier om alle png-tjes, die worden gebruikt in de website, automatisch door die alphaloader te halen?

alvast bedankt!

[crisp]

Nee, er is geen truuk om hetzelfde te doen voor images die als achtergrondplaatje gebruikt worden.
Wachten op IE7 of geen PNG gebruiken is mijn advies

(of nog beter: geen IE gebruiken )

[ Voor 12% gewijzigd door crisp op 08-12-2005 18:17 ]

[whoami]

HTML / CSS hoort niet thuis in P&W, maar in W&G (clientside stuff nl, zie de forumdescription).

P&W -> W&G

[BtM909]

En je topictitel iets ontschreeuwd

[sjaakaq]

Nope; alle PNG-Hacks voor IE gelden niet voor de background.

[Verwijderd]

thx iedereen, scheelt weer een hoop uitzoek werk (en gehoop dat het toch kon).

@whoami: ik dacht dat ik hem in W&G had gepost, sorry.
@BtM909: Was de frustratie van het moment.

[Johnvh]

De onderstaan de code werkt wel hoor

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')";
            }
        }
    }
}

Het enige probleem is links, wanneer je een link over een background zet heb je een probleem. Dit werkt niet.
Verder zijn PNG plaatjes gewoon transparant
Ik vond dit trouwens hier

Succes

[IntToStr]

Een tijdje terug heb ik hier zelf ook naar gezocht en er bleek niet veel te vinden toen.

Dit is was het resultaat van een combinatie van wat bestaande dingen + een paar kleine wijzigingen van mezelf:

code:

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|6/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "images/blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "style.backgroundImage") return;
   if ( ! new RegExp(blankSrc).test(element.currentStyle.backgroundImage))
      fixImage();
};

function fixImage() {
   // get src
   var bg = element.currentStyle.backgroundImage;
   var src = bg.substring(5, bg.length - 2);
   
   // check for real change
   if (src == realSrc) {
      element.style.backgroundImage = 'url("' + blankSrc + '")';
      return;
   }

   if ( ! new RegExp(blankSrc).test(bg)) {
      // backup old src
      realSrc = src;
   }
   
   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set filter
      element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='image')";
      element.style.backgroundImage = 'url("' + blankSrc + '")';
   }
   else {
      // remove filter
      element.style.filter = "";
   }
}

</script>
</public:component>

Dit is een behaviour die je via css aan een element kunt koppelen met een transparent png backgroundimage.

Zo'n zelfde behaviour is ook standaard in de omloop voor gewone images als ik me niet vergis. Daar is dit een variant op.

Dit lijkt ook veel op de oplossing hierboven, maar dit werkt dus via css (en dan alsnog met javascript). Misschien dat er ondertussen al meer van dit soort scriptjes zijn, maar zoniet dan heb je hier misschien nog wat aan.