SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PNG Script Hides My Graphics!

    Hello,

    I use the following script to strip the transparent background on PNG images in previous versions of Internet Explorer. However, it started hiding my images, and I can't figure out what changed.

    I am very limited in my Javascript knowledge, so please keep your answers simple.

    This script seems to be adding other styling to the images and the css settings here override the ones in my stylesheet even though the stylesheet comes after the script in my page.

    Can you help, please?

    Code:
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    function correctPNG() // correctly handle PNG transparency in Win IE
       {
       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
    	     }
          }
       }
    window.attachEvent("onload", correctPNG);
    </script>
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is a script I use for stuff like that. It works with both PNG images and PNG Backgrounds

    Code:
    window.onload = function()
    {
        if(navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent)
            alphaBackgrounds();
    }
    
    function alphaBackgrounds(){
        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(document.all[i].nodeName == "IMG")
            {
                if(document.all[i].src.match(/\.png/i) != null)
                {            
                    var mypng = GetFileName(document.all[i].src);
                    document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/"+mypng+"', sizingMethod='scale')";
                    var x = document.all[i].width;
                    var y = document.all[i].height;
                    document.all[i].src = "images/m_trans.gif";
                    document.all[i].height = y;
                    document.all[i].width = x;
                }
            }
            else
            {
                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/m_trans.gif')";
                    }
                }
            }
        }
    }
    images/m_trans.gif is a 1x1 transparent gif.


  3. #3
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added this between the script tags in the head of my page and uploaded a 1x1 transparent gif to the images folder. IE 5, 5.5, and 6 all don't show PNGs correctly. There is still a background on these images.

    The web site is here: www.playmorswingsets.com. The Playmor logo is a png graphic with absolute positioning.

    Can you help?
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try changing

    Code:
    document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/"+mypng+"', sizingMethod='scale')";
    to

    Code:
    document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
    It could be worth checking if the filter has been applied. Alert it afterwards?


  5. #5
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't make any difference.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    poo. I haven't got any way of testing the script properly, knowing my luck its probably never worked. I've had it working on IE 6, or at least my PNG's have been fine. Could you possibly provide a png sample that i can have a look at?


  7. #7
    Coding for Jesus LavernGingerich's Avatar
    Join Date
    Jul 2003
    Location
    Tennessee
    Posts
    607
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Here is one:

    http://www.playmorswingsets.com/images/logo.png

    Perhaps we could just modify my original script. It was working earlier, but I can't get it to work now.
    Yoder's Smoky Mountain Barbecue
    High quality barbeque smokers, pig roasters, and bbq pit grills.
    Pursuing Life Ministries - Jesus has saved me and given me hope.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •