SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Internet Explorer PNG filter

    I am trying to use this script to add PNG support in IE however, the image is in an external style sheet. Can someone give me pointers on how to modify this script to pull the image from the style sheet?

    Example:

    background: url(image/image.gif) #fff no-repeat 0% 0%;

    Code:
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
      	document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
      	window.attachEvent("onload", fnLoadPngs);
      }
      
      function fnLoadPngs() {
      	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
      	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
      
      	for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
      		if (itsAllGood && img.src.match(/\.png$/i) != null) {
      			var src = img.src;
      			img.style.width = img.width + "px";
      			img.style.height = img.height + "px";
      		    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
      			img.src = "x.gif";
      		}
      		img.style.visibility = "visible";
      	}
      }
    Thanks

    Chuck

    Edit
    I found a link that helps, but since I am not a Javascript guru I havn't gotten it working yet.. http://forums.devshed.com/t15759/s.html
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Chuckie
    I am trying to use this script to add PNG support in IE however, the image is in an external style sheet. Can someone give me pointers on how to modify this script to pull the image from the style sheet?

    Example:

    background: url(image/image.gif) #fff no-repeat 0% 0%;

    Code:
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
        	document.writeln('<style type="text/css">img { visibility:hidden; } </style>');
        	window.attachEvent("onload", fnLoadPngs);
        }
        
        function fnLoadPngs() {
        	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
        	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
        
        	for (var i = document.images.length - 1, img = null; (img = document.images[i]); i--) {
        		if (itsAllGood && img.src.match(/\.png$/i) != null) {
        			var src = img.src;
        			img.style.width = img.width + "px";
        			img.style.height = img.height + "px";
        		    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
        			img.src = "x.gif";
        		}
        		img.style.visibility = "visible";
        	}
        }
    Thanks

    Chuck

    Edit
    I found a link that helps, but since I am not a Javascript guru I havn't gotten it working yet.. http://forums.devshed.com/t15759/s.html
    I wasn't able to figure it out so I just used some scripts and move the background images to DIV containers.

    A couple of links that helped me out:

    http://www.allinthehead.com/retro/69
    http://www.youngpup.net/

    If someone has a solution for this I would still welcome it
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com


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
  •