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  

Comments

RSS Icon Subscribe to comments
Posted By: daninmanchester on November 1, 2008

Works great except in Opera it stops the PNG's being displayed so I tweaked it to include a function to check if the browser was IE.

function isIE(){ return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);}

    init: function() { 
        if (isIE())
        {addLoadEvent(fnLoadPngs);}
    },  ......

now works a treat :D

You need to login to post a comment.