Go Back   TechArena Community > Technology > Technology & Internet
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



PNG transparency in internet explorer

Technology & Internet


Reply
 
Thread Tools Search this Thread
  #1  
Old 19-02-2009
Member
 
Join Date: Aug 2008
Posts: 129
PNG transparency in internet explorer
  

My understanding is that alpha PNG transparency has been fixed in IE7. I see that there is a slew of hacks for IE. What's the state of the hack for doing this? I don't care about IE5.5 and below. JS OK. I'm not thrilled about hacking anything, but absolutely need to use an alpha transparency PNG.

Reply With Quote
  #2  
Old 19-02-2009
Member
 
Join Date: Apr 2008
Posts: 2,276
Re: PNG transparency in internet explorer

Up until IE7, there has been no fully native support for PNG alpha channel transparency in Internet Explorer. However, since IE5.5 there has been some support in the form of proprietary filter called the AlphaImageLoader. Internet Explorer filters can be applied directly in your CSS (for both inline and background images), or by setting the same CSS property with JavaScript.

CSS:
Code:
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
javascript:
Code:
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
Reply With Quote
  #3  
Old 19-02-2009
Member
 
Join Date: May 2008
Posts: 2,786
Re: PNG transparency in internet explorer

We get a lot (and I do mean a lot) of complaints about the lack of alpha channel support for PNG in Internet Explorer. Quite right too! This is an optional part of the PNG specification but it is the part that actually makes PNG more useful that other image formats. I am hopeful that we may be able to address this at some point in the future but at this stage we can't say exactly when or offer any guarantees. If anyone does offer you a guarantee about a feature shipping in a future piece of software then you should be very suspicious.

Unfortunately we can't turn back time and add this functionality. Or maybe we can!
There are workarounds that make use of the AlphaImageLoader filter supplied with Internet Explorer. Now using this filter in its raw form involves adding script to the page. I know many web designers are uncomfortable with adding script as it also can make supporting these web pages more difficult particularly if they don't have a programmer to turn to when things stop working. Fortunately a few clever people have wrapped up the functionality in a component known as a behavior so all a web designer needs to do is add a style for images to their page

Code:
img { behavior: url("pngbehavior.htc");}
and place the pngbehavior.htc file with the page on their server.
Reply With Quote
  #4  
Old 19-02-2009
Member
 
Join Date: Nov 2005
Posts: 403
Re: PNG transparency in internet explorer

While Internet Explorer for Windows 6 (IE6) and previous versions of IE don?t support PNGs? alpha-transparency feature, all popular browsers can display PNGs.

While IE6- doesn?t explicitly support alpha-transparency out-of-the-box, if you will, there is a workaround that ensures PNG?s cross-browser compatibility.

Microsoft has a plethora of proprietary visual filters and transitions that are available to IE4+. These filters are designed to apply various multimedia affects (transition wipes, light effects and so on) to images in a web page that are viewed with IE. One of these image filters ? AlphaImageLoader ? lets you display a PNG with alpha-transparency in IE6.

You can employ this filter within the HTML of your page by creating a div element and embedding into it a bit of CSS:

Code:
<div style=?position:relative; height: 188px; width: 188px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='images/image.png',sizingMethod='scale');?></div>
The key property here is the filter property. While filter is not valid CSS, it does allow you to apply the AlphaImageLoader filter to the image specified in the parentheses. However, since it isn?t standards-compliant, you may wish to apply this property only as needed (i.e., only when the page is being displayed in IE6-).
__________________
Don't talk unless you can improve the silence.
Reply With Quote
  #5  
Old 19-02-2009
Member
 
Join Date: Apr 2008
Posts: 2,277
Re: PNG transparency in internet explorer

If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent.

Those who work with PNG files can use the AlphaImageLoader filter, as demonstrated in the following example:
Code:
<html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image.  -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>
Reply With Quote
  #6  
Old 19-02-2009
Member
 
Join Date: Apr 2008
Posts: 2,567
Re: PNG transparency in internet explorer

SuperSleight adds a number of new and useful features that have come from the day-to-day needs of working with PNGs.
  • Works with both inline and background images, replacing the need for both sleight and bgsleight

  • Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)

  • Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.

  • Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.

  • Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.
Download SuperSleight


Implementing SuperSleight

Getting SuperSleight running on a page is quite straightforward, you just need to link the supplied JavaScript file (or the minified version if you prefer) into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.
Code:
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
Supplied with the JavaScript is a simple transparent GIF file. The script replaces the existing PNG with this before re-layering the PNG over the top using AlphaImageLoaded. You can change the name or path of the image in the top of the JavaScript file, where you’ll also find the option to turn off the adding of position: relative to links and fields if you don’t want that.

The script is kicked off with a call to supersleight.init() at the bottom. The scope of the script can be limited to just one part of the page by passing an ID of an element to supersleight.limitTo(). And that’s all there is to it.
Reply With Quote
  #7  
Old 19-02-2009
Member
 
Join Date: Oct 2005
Posts: 2,357
Re: PNG transparency in internet explorer

Including PNG Transparency in IE6

One available method for doing this is employing Angus Turnbull?s .htc script:
  1. First, download the .htc script at TwinHelix Designs. HTC is a scripting language only usable by Internet Explorer (because it was created by Microsoft) and this specific script contains applies the AlphaImageLoader filter to all images within a web page.

  2. After downloadign the script, upload the script to your Web server.

  3. Then, create (or download from TwinHelix) a blank gif file. This image file is 1?1 pixel with the color set as transparent. (Back in the 90s, these were called these gems "single pixel GIFs"). Within the .htc script, change the line that references the blank.gif file so that it points to the gif?s location on the server.

  4. Create a separate CSS file (we?ll name it ie.css), and include within in the following single line, referencing the location of the .htc file:
    Code:
    img { 
     behavior: url(iepngfix.htc); 
    }
    The behavior property let?s you attach a script to some selector (in this case, all img elements). So, this CSS file attaches the .htc file to all of your images, thus applying the desired filter effect to every image within a web page.

  5. But, we only want to load this CSS file when the page is viewed in IE6-. To do this, just add the following conditional comment to your page?s header:
    Code:
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" media="screen" 
    href="ie.css" />    
    <![endif]-->
    Conditional comments like these are understood by IE. What the comment says is, ?if the browser is IE6 or below, then read the lines within the comment tags. Otherwise, ignore them.? Conditional comments provide a convenient way of applying IE-specific HTML or CSS. Here, the ie.css stylesheet loads only if the page is displayed in IE6-, letting you apply the non-compliant CSS only when it?s absolutely necessary.
__________________
I'm the Proud Owner of the most dangerous weapon
known to man kind: Human Brain
Reply With Quote
Reply

  TechArena Community > Technology > Technology & Internet
Tags: , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "PNG transparency in internet explorer"
Thread Thread Starter Forum Replies Last Post
How to stop internet explorer 9 rendering pages in internet explorer 7 compatibility mode? Nuru's Technology & Internet 7 07-03-2012 10:42 PM
I am still having internet explorer 9 even after installing Windows 8 Consumer Preview,How can I get Internet Explorer 10? KJo Technology & Internet 5 07-03-2012 03:18 PM
How to turn off transparency in internet explorer 9 ddj Technology & Internet 4 26-08-2011 11:17 PM
Unable to post feeds with Internet Explorer 8 or Internet Explorer 9 in Zynga Poker THAKARSHI Video Games 6 26-05-2011 10:35 AM
Cannot find Internet Explorer after uninstalling Internet Explorer 9 Beta nEESHANT Windows Software 4 20-01-2011 11:30 AM


All times are GMT +5.5. The time now is 10:52 AM.