...

View Full Version : PNG Transparency support in IE 5.5+



colindunn
10-16-2007, 11:41 PM
Hey guys,

So I am trying to use PNG's on my site and include support for Internet Explorer 5.5 & 6. I understand this is an uphill battle, but have found a solution (http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html) that works reasonably well. I don't know what I am doing wrong but it is not working.

Check out the site http://bouncenbattle.com. I have included the behavior attribute inside a conditional statement so that it will validate, but it seems to be working only on some machines. Using the same machine, I witnessed it malfunctioning on my site but working on the source site's demo page (http://webfx.eae.net/dhtml/pngbehavior/demo.html).

Perhaps the most consfusing part of this whole conudrum is the fact the image works from the index (inflatable.png) but the background images of the divs do not. Is this the problem, div backgrounds are not supported? What gives? Any help would be appreciated.



<!--[if IE]>
<style type="text/css">
img {
behavior: url(transparency.htc);
}
</style>
<![endif]-->
transparency.htc


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

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/


// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'images/spacer.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}

doFix();

</script>
</public:component>

abduraooft
10-17-2007, 08:16 AM
How about changing your html like

<div id="frame">
<div id="inflatable"> <!--img alt="inflatable" src="iinflatable.png"--> </div>
</div>
and CSS like


div#inflatable {
position: absolute;
bottom:0;
left:468px;
width: 417px;
height:346px;
background:url(inflatable.png) !important;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inflatable.png");
}

so that no htc is required.

colindunn
10-18-2007, 11:37 PM
Interesting idea. Couple of questions, first off, is "filter" valid? Also,is there any way to apply this to div background images? Thanks for your help.

abduraooft
10-19-2007, 08:19 AM
Valid? an interesting question. The basic question is whether IE is valid or not. Until IE learn how to display PNG without the usual "dish-water color " (from sitepoint.com) background, I say these all are valid.
CSS validator may look at me harshly, but I'll use it since google use it in orkut and gtalk and it doesn't require any javascript hack.

PS:in site review forum, I've added a site www.nrityalaya.net which uses a lot of PNG s.
PPS: Its not as easy as that of using img or normal background, when talking about cross browser compatibility.

abduraooft
10-22-2007, 10:02 AM
In fact you are applying the same invalid properties through javascript. And you can make the above trick much more simpler like


<head>
<!--[if IE]>
<style type="text/css">
#test{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png");
}
</style>
<![endif]-->
</head>

<body>

<!--[if IE]>
<img id="test" src="#" width="1" height="1">
<![endif]-->

<!--[if !IE]><!-->
<img id="test" src="image.png" width="360" height="116">
<!--<![endif]-->

</body>

colindunn
10-22-2007, 10:48 PM
Well that may work for images but what about div backgrounds? The most important part of this is that I need something to work just as effectively on images on the page as on the background images. If I am loading the javascript to fix the background image problem I may as well apply it to the rest of the images.

abduraooft
10-23-2007, 09:48 AM
Well, the first post was for background images and the last one for simply img.

The advantage of this method is, it'll work even if someone disable JS in their browser (but it's very hard in IE to do/not-to-do this ;)) and it is instantaneous unlike JS as they take some time to get executed after loading the page.

The decision is left to us. If there are a lot of PNGs, then JS method is friendly. But if there are only a few images (which are the important images that give the major look and feel), then it is worth.

moss2076
10-23-2007, 03:47 PM
I use a transparent PNG in my website and I just used this code in the html file header -

<!--[if gte ie 5.5000]>
<link rel="stylesheet" type="text/css" href="pages/ie55.css"/>
<![endif]-->

And then used this code in a external CSS file (seperate from my main css file with the png image which I need to be transparent) called ie55.css -

ul#leftmenu {
filter : progid : DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bannerimage_pinkred300.png' , sizingMethod='crop';
background:none;
}


For my needs I had a UL which needed a transparent png. But you can use the code with Divs too.

colindunn
10-24-2007, 11:16 PM
ul#leftmenu {
filter : progid :
DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bannerimage_pinkred300.png' , sizingMethod='crop';
background:none;
}


How does this code work? And what exactly does sizingMethod='crop' do?

abduraooft
10-25-2007, 10:57 AM
If you are interested,
http://msdn2.microsoft.com/en-us/library/ms532920.aspx
(I hate Internet Exploder ;))



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum