[Javascript] transparent png

[Nick Fitzsimons]

Troy III Ajnej wrote:
> IE was hoping not to mess with PNG rights and patents, so they introduced
> filters since IE4x

I'm not sure why you feel this compulsive need to pretend that Microsoft 
isn't responsible for its own failings (even Bill Gates has admitted 
that they dropped the ball on IE) but PNG was never surrounded by rights 
and patents issues, being an open W3C standard. Your assertion is made 
even more preposterous by the fact that Michael Stokes of Microsoft was 
one of the authors of the PNG standard:
<http://www.w3.org/TR/PNG/#F-Relationship>

> try this: (CSS)
> filter:alpha(opacity='50') //half
> or if you like discrete-color full transparency:
> filter:chroma(color='#0000ff') //blue

Neither of these has anything to do with PNG alpha transparency, which 
is what Schalk was asking about. I'll respond to his original enquiry 
below...

>  > Does anyone know of a definitive way of making transparent png work in 
>  > IE 6-. I am using http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
>  >
>  > But as of now I cannot confirm that it works. It may be because I have 
>  > IE7 installed on the same system but according to the IE blog this 
>  > should be backwards compatible, so I am curious. Thanks!
>  >
>  > -- 
>  > Kind Regards
>  > Schalk Neethling

Schalk,

It depends on whether you are looking to get PNGs working as a 
background image through CSS, or as an inline image using the <img> element.

In the "background-image" case you will find that IE's limited support 
for alpha transparency via the AlphaImageLoader means that not all 
designs can be implemented with ease, or at all; for more details, have 
a look at my recent post to the css-discuss mailing list:
<http://archivist.incutio.com/viewlist/css-discuss/76522>

For the "<img>" case, there's an older post to css-d on the subject:
<http://archivist.incutio.com/viewlist/css-discuss/72894>

For examples of this in action without needing an HTC file or any 
JavaScript, you could have a look at

<http://www.gwrfmbristol.co.uk/showsanddjs>

On that page, the images of the DJs are done with <img> elements, and 
the gradient backgrounds are background PNGs going from 100% transparent 
to 0% transparent. Due to some limitations of the content management 
system (which powers nearly 40 local radio station web sites using that 
design here in the UK), the appropriate CSS and the hacks to get IE 
working properly are in the source of the page, within IE-only 
conditional comments (one of the good things about IE). So if you view 
the source and have a look at the CSS files, you should be able to work 
out what's going on.

Note that there's no JavaScript - I wanted the designs to work even with 
JavaScript off, and the various HTC files, or "behaviors", that people 
have created don't work without JS. However, if a JS-only solution is 
acceptable for your purposes, understanding the content of those two 
css-d posts and that page will enable you to better determine whether 
the behavior you are using is doing its job. A useful tool is the IE Web 
Developer toolbar: while nowhere near as capable as the Firefox 
equivalent, it will allow you to see whether the necessary filters are 
being applied. See:
<http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en>

One common problem with getting the IE filters working is that the 
element to which they are applied must have had its "hasLayout" property 
triggered; see
<http://www.satzansatz.de/cssd/onhavinglayout.html>
and
<http://msdn.microsoft.com/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp>
for more on that.

IE7 supports PNG transparency correctly, so the conditional comments 
make sure the fixes are only applied to IE 6 and below. They won't work 
at all on IE less than 5.5, as the AlphaImageLoader was only introduced 
with 5.5.

Oh, and if you have IE6 and IE7 installed side-by-side on the same 
machine you'll have real trouble getting anything working reliably: 
Microsoft have explicitly stated that they don't support side-by-side 
installation, and the interactions between the two are unpredictable, 
particularly when code tries to determine which version it's running on.

HTH,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/