[Javascript] transparent png

[Schalk]

Thanks a lot Nick!

Nick Fitzsimons wrote:
> 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.

-- 
Kind Regards
Schalk Neethling
Web Developer.Designer.Programmer.President
Volume4.Business.Solution.Developers