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

jonhenshaw on 11/30/07


Tagged

javascript js transparency ie6 internet explorer transparent


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

jonhenshaw
vali29
basicmagic
w11


IE 6 Transparent PNG Fix - SuperSleight


Published in: JavaScript 


URL: http://24ways.org/2007/supersleight-transparent-png-in-ie6

Getting SuperSleight running on a page is quite straightforward, you just need to link the supplied JavaScript file into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.

  1. var supersleight = function() {
  2.  
  3. var root = false;
  4. var applyPositioning = true;
  5.  
  6. // Path to a transparent GIF image
  7. var shim = 'x.gif';
  8.  
  9. // RegExp to match above GIF image name
  10. var shim_pattern = /x\.gif$/i;
  11.  
  12.  
  13.  
  14. var fnLoadPngs = function() {
  15. if (root) {
  16. root = document.getElementById(root);
  17. }else{
  18. root = document;
  19. }
  20. for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
  21. // background pngs
  22. if (obj.currentStyle.backgroundImage.match(/\.png/i) !== null) {
  23. bg_fnFixPng(obj);
  24. }
  25. // image elements
  26. if (obj.tagName=='IMG' && obj.src.match(/\.png$/i) !== null){
  27. el_fnFixPng(obj);
  28. }
  29. // apply position to 'active' elements
  30. if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
  31. obj.style.position = 'relative';
  32. }
  33. }
  34. };
  35.  
  36. var bg_fnFixPng = function(obj) {
  37. var mode = 'scale';
  38. var bg = obj.currentStyle.backgroundImage;
  39. var src = bg.substring(5,bg.length-2);
  40. if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
  41. mode = 'crop';
  42. }
  43. obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
  44. obj.style.backgroundImage = 'url('+shim+')';
  45. };
  46.  
  47. var el_fnFixPng = function(img) {
  48. var src = img.src;
  49. img.style.width = img.width + "px";
  50. img.style.height = img.height + "px";
  51. img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
  52. img.src = shim;
  53. };
  54.  
  55. var addLoadEvent = function(func) {
  56. var oldonload = window.onload;
  57. if (typeof window.onload != 'function') {
  58. window.onload = func;
  59. } else {
  60. window.onload = function() {
  61. if (oldonload) {
  62. oldonload();
  63. }
  64. func();
  65. };
  66. }
  67. };
  68.  
  69. return {
  70. init: function() {
  71. addLoadEvent(fnLoadPngs);
  72. },
  73.  
  74. limitTo: function(el) {
  75. root = el;
  76. },
  77.  
  78. run: function() {
  79. fnLoadPngs();
  80. }
  81. };
  82. }();
  83.  
  84. // limit to part of the page ... pass an ID to limitTo:
  85. // supersleight.limitTo('header');
  86.  
  87. supersleight.init();

Report this snippet 

You need to login to post a comment.