Displaying PNGs in IE Despite AlphaImageLoader

by klotzj27 — last modified Jun 09, 2010 11:23 AM

Transparent PNGs rendered with AlphaImageLoader cause a problem for IE6 and earlier

It is a well-known fact that transparent PNGs won't display in IE6 and earlier without using the AlphaImageLoader fix/hack. While this allows transparent PNGS in IE6 and earlier it does not do so without causing a few other potential problems. One being that AlphaImageLoader can block interaction with links and forms being rendered on AlphaImageLoader PNGs. If a link won't click or a form won't work properly take the following steps to remedy this problem:

1) Make sure this is an AlphaImageLoader issue by using Firebug, IE Developers Toolbar, or any CSS inspection tool and inpecting the affected area. If in the filter attribute of the affected area is a line similar to

'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/image', sizingMethod='scale')'

then we have found our problem.

Note: This line is automatically applied to PNGs by the script in uwosh.thembase entitled 'pngie6fix.js'.

It is useful for viewing alpha channel transparent PNGs in IE6 and earlier when this bug doesn't occur.

2) Create a custom copy of pngie6fix.js in the affected sites ZMI by

a) going to the portal_skins/custom folder
b) selecting 'File' from the dropdown and then clicking the Add button
c) add the following code to your newly created pngie6fix.js:

var supersleight=function(){var root=false;

var applyPositioning=true;

var shim='x.gif';

var shim_pattern=/x\.gif$/i;

var fnLoadPngs=function(){if(root){root=document.getElementById(root);}else{root=document;}

for(var i=root.all.length-1,obj=null;(obj=root.all[i]);i--){if(obj.currentStyle.backgroundImage.match("75transCool.png")==null || obj.currentStyle.backgroundImage.match("callToActionBak.png")==null || obj.currentStyle.backgroundImage.match("trans75.png")==null){

if(obj.currentStyle.backgroundImage.match(/\.png/i)!==null){bg_fnFixPng(obj);}

if(obj.tagName=='IMG'&&obj.src.match(/\.png$/i)!==null){el_fnFixPng(obj);}

if(applyPositioning&&(obj.tagName=='A'||obj.tagName=='INPUT')&&obj.style.position===''){obj.style.position='relative';}}}};var bg_fnFixPng=function(obj){var mode='scale';var bg=obj.currentStyle.backgroundImage;var src=bg.substring(5,bg.length-2);if(obj.currentStyle.backgroundRepeat=='no-repeat'){mode='crop';}

obj.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='"+mode+"')";obj.style.backgroundImage='url('+shim+')';};var el_fnFixPng=function(img){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=shim;};var addLoadEvent=function(func){var oldonload=window.onload;if(typeof window.onload!='function'){window.onload=func;}else{window.onload=function(){if(oldonload){oldonload();}

func();};}};return{init:function(){addLoadEvent(fnLoadPngs);},limitTo:function(el){root=el;},run:function(){fnLoadPngs();}};}();supersleight.init();

d) edit the .js file to not add the AlphaImageLoader filter to the affected PNG like such....

Find this line:

if(obj.currentStyle.backgroundImage.match("75transCool.png")==null

and add a condition for every image that is causing links and/or forms to break:

&& obj.currentStyle.backgroundImage.match("callToActionBak.png")==null

e) navigate to the site's portal_javascripts and uncheck the '++resource++uwosh.themebase.pngie6fix.js' and add a script named pngie6fix.js with the condition field set to "python:'MSIE 6' in here.REQUEST['HTTP_USER_AGENT']"

Document Actions

Print this

Bookmarks

Sections

Personal tools

Displaying PNGs in IE Despite AlphaImageLoader

Document Actions

For Plone technical support during normal work hours:

To request a new web site: