PDA

View Full Version : Transparent PNG icons IE6



ser
10 Nov 2010, 7:13 AM
When I put a png icon is visible frame around it.
http://savepic.net/158755.png

I tried to describe the icon in css

.open {
background-image:url(../images/icons/open.png) !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icons/open.png', sizingMethod='scale');
}


but it did not help.
Does anyone can suggest a solution?

ser
11 Nov 2010, 12:29 AM
No one uses IE6?

Animal
11 Nov 2010, 12:38 AM
Not if we can possibly avoid it.

IIRC, IE6 just cannot do this. It's ancient technology.

steffenk
11 Nov 2010, 1:15 AM
Here is a prototype example how to do transparent png in IE6, you should be able to convert it to ExtJS


Element.addMethods({
pngHack: function(element) {
element = $(element);
var transparentGifPath = 'clear.gif';

// If there is valid element, it is an image and the image file ends with png:
if (Object.isElement(element) && element.tagName === 'IMG' && element.src.endsWith('.png')) {
var alphaImgSrc = element.src;
var sizingMethod = 'scale';
element.src = transparentGifPath;
}

if (alphaImgSrc) {
element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{alphaImgSrc}",sizingMethod="#{sizingMethod}")'.interpolate(
{
alphaImgSrc: alphaImgSrc,
sizingMethod: sizingMethod
});
}

return element;
}
});

Event.observe(window, 'load', function() {
if (Prototype.Browser.IE) {
var version = parseFloat(navigator.appVersion.split(';')[1].strip().split(' ')[1]);
if (version === 6) {
$$('img').each(function(img) {
img.pngHack();
});
}
}
});

ser
11 Nov 2010, 3:40 AM
Thanks steffenk, I will try your method

devtig
27 Apr 2012, 7:46 AM
I have converted it for Ext JS.


if (Ext.isIE6) { Ext.select('img').each(function(element) {
var endsWith=function(s) {
return this.indexOf(s, this.length - s.length) !== -1;
}, alphaImgSrc, urlMatch;

if (endsWith.call(element.dom.src, '.png')) {
alphaImgSrc = element.dom.src;
element.dom.src = '/images/s.gif';
element.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader('+
'src="'+alphaImgSrc+'",sizingMethod="scale")');
} else if (urlMatch=element.getStyle('background-image').match(/^url[("']+(.*\.png)[)"']+$/i)) {
alphaImgSrc = urlMatch[1];
element.setStyle('background-image', 'none');
element.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader('+
'src="'+alphaImgSrc+'",sizingMethod="crop")');
}
});
}