We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

alvaroisorna on 06/30/06


Tagged

javascript png internetexplorer opacity prototypejs


Versions (?)


Who likes this?

9 people have marked this snippet as a favorite

jonhenshaw
luman
bobbysmith007
helle
kaminogoya
panatlantica
j4k
kgosser
SpinZ


PNG Opacity support for Internet Explorer (simplified)


Published in: JavaScript 


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

  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 

You need to login to post a comment.