PNG Opacity support for Internet Explorer (simplified)


/ Published in: JavaScript
Save to your folder(s)

first try to a crossbrowser support for png's opacity support


Copy this code and paste it in your HTML
  1. // this script have dependencies on prototype-1.4.0.js and Browser Detect Lite v2.1
  2. // http://prototype.conio.net/
  3. // http://www.dithered.com/javascript/browser_detect/index.html
  4. // (cc) alvaro isorna
  5.  
  6. Event.observe(window, 'load', function(){
  7. // this will iterate with each element with the class 'ie-fix-opacity' and add an IE filter,
  8. // replacing the background-image for the filter of that image
  9. document.getElementsByClassName('ie-fix-opacity').each(function(poElement){
  10. // if IE5.5+ on win32, then display PNGs with AlphaImageLoader
  11. if ((browser.isIE55 || browser.isIE6up) && browser.isWin32){
  12. var cBGImg = poElement.currentStyle.backgroundImage;
  13. var cImage = cBGImg.substring(cBGImg.indexOf('"') + 1, cBGImg.lastIndexOf('"'));
  14.  
  15. poElement.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + cImage + "', sizingMethod='scale')";
  16. poElement.style.backgroundImage = "none";
  17. }
  18. });
  19. }, false);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.