[Summary view] [Print] [Text view]

   1  <public:component>
   2  <script type="text/javascript">
   3  // $Id: iepngfix.htc,v 1.1.2.2 2010/04/24 19:35:19 sociotech Exp $

   4  
   5  // IE5.5+ PNG Alpha Fix v2.0 Alpha

   6  // (c) 2004-2009 Angus Turnbull http://www.twinhelix.com

   7  
   8  // This is licensed under the GNU LGPL, version 2.1 or later.

   9  // For details, see: http://creativecommons.org/licenses/LGPL/2.1/

  10  
  11  var IEPNGFix = window.IEPNGFix || {};
  12  IEPNGFix.data = IEPNGFix.data || {};
  13  
  14  
  15  // CONFIG: blankImg is the path to blank.gif, *relative to the HTML document*.

  16  // Try either:

  17  // * An absolute path like:  '/images/blank.gif'

  18  // * A path relative to this HTC file like:  thisFolder + 'blank.gif'

  19  var thisFolder = document.URL.replace(/(\\|\/)[^\\\/]*$/, '/');
  20  IEPNGFix.blankImg = thisFolder + '../images/blank.gif';
  21  
  22  
  23  IEPNGFix.fix = function(elm, src, t) {
  24      // Applies an image 'src' to an element 'elm' using the DirectX filter.

  25      // If 'src' is null, filter is disabled.

  26      // Disables the 'hook' to prevent infinite recursion on setting BG/src.

  27      // 't' = type, where background tile = 0, background = 1, IMG SRC = 2.

  28  
  29      var h = this.hook.enabled;
  30      this.hook.enabled = 0;
  31  
  32      var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
  33          src = (src || '').replace(/\(/g, '%28').replace(/\)/g, '%29');
  34  
  35      if (
  36          src && !(/IMG|INPUT/.test(elm.nodeName) && (t != 2)) &&
  37          elm.currentStyle.width == 'auto' && elm.currentStyle.height == 'auto'
  38      ) {
  39          if (elm.offsetWidth) {
  40              elm.style.width = elm.offsetWidth + 'px';
  41          }
  42          if (elm.clientHeight) {
  43              elm.style.height = elm.clientHeight + 'px';
  44          }
  45          if (elm.currentStyle.display == 'inline') {
  46              elm.style.display = 'inline-block';
  47          }
  48      }
  49  
  50      if (t == 1) {
  51          elm.style.backgroundImage = 'url("' + this.blankImg + '")';
  52      }
  53      if (t == 2) {
  54          elm.src = this.blankImg;
  55      }
  56  
  57      if (elm.filters[f]) {
  58          elm.filters[f].enabled = src ? true : false;
  59          if (src) {
  60              elm.filters[f].src = src;
  61          }
  62      } else if (src) {
  63          elm.style.filter = 'progid:' + f + '(src="' + src +
  64              '",sizingMethod="' + (t == 2 ? 'scale' : 'crop') + '")';
  65      }
  66  
  67      this.hook.enabled = h;
  68  };
  69  
  70  
  71  IEPNGFix.process = function(elm, init) {
  72      // Checks the onpropertychange event (on first 'init' run, a fake event)

  73      // and calls the filter-applying-functions.

  74  
  75      if (
  76          !/MSIE (5\.5|6)/.test(navigator.userAgent) ||
  77          typeof elm.filters == 'unknown'
  78      ) {
  79          return;
  80      }
  81      if (!this.data[elm.uniqueID]) {
  82          this.data[elm.uniqueID] = {
  83              className: ''
  84          };
  85      }
  86      var data = this.data[elm.uniqueID],
  87          evt = init ? { propertyName: 'src,backgroundImage' } : event,
  88          isSrc = /src/.test(evt.propertyName),
  89          isBg = /backgroundImage/.test(evt.propertyName),
  90          isPos = /width|height|background(Pos|Rep)/.test(evt.propertyName),
  91          isClass = !init && ((elm.className != data.className) &&
  92              (elm.className || data.className));
  93      if (!(isSrc || isBg || isPos || isClass)) {
  94          return;
  95      }
  96      data.className = elm.className;
  97      var blank = this.blankImg.match(/([^\/]+)$/)[1],
  98          eS = elm.style,
  99          eCS = elm.currentStyle;
 100  
 101      // Required for Whatever:hover - erase set BG if className changes.

 102      if (
 103          isClass && (eS.backgroundImage.indexOf('url(') == -1 ||
 104          eS.backgroundImage.indexOf(blank) > -1)
 105      ) {
 106          return setTimeout(function() {
 107              eS.backgroundImage = '';
 108          }, 0);
 109      }
 110  
 111      // Foregrounds.

 112      if (isSrc && elm.src && { IMG: 1, INPUT: 1 }[elm.nodeName]) {
 113          if ((/\.png/i).test(elm.src)) {
 114              if (!elm.oSrc) {
 115                  // MM rollover compat

 116                  elm.oSrc = elm.src;
 117              }
 118              this.fix(elm, elm.src, 2);
 119          } else if (elm.src.indexOf(blank) == -1) {
 120              this.fix(elm, '');
 121          }
 122      }
 123  
 124      // Backgrounds.

 125      var bgSrc = eCS.backgroundImage || eS.backgroundImage;
 126      if ((bgSrc + elm.src).indexOf(blank) == -1) {
 127          var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
 128          if (bgPNG) {
 129              if (this.tileBG && !{ IMG: 1, INPUT: 1 }[elm.nodeName]) {
 130                  this.tileBG(elm, bgPNG[1]);
 131                  this.fix(elm, '', 1);
 132              } else {
 133                  if (data.tiles && data.tiles.src) {
 134                      this.tileBG(elm, '');
 135                  }
 136                  this.fix(elm, bgPNG[1], 1);
 137                  this.childFix(elm);
 138              }
 139          } else {
 140              if (data.tiles && data.tiles.src) {
 141                  this.tileBG(elm, '');
 142              }
 143              this.fix(elm, '');
 144          }
 145      } else if ((isPos || isClass) && data.tiles && data.tiles.src) {
 146          this.tileBG(elm, data.tiles.src);
 147      }
 148  
 149      if (init) {
 150          this.hook.enabled = 1;
 151          elm.attachEvent('onpropertychange', this.hook);
 152      }
 153  };
 154  
 155  
 156  IEPNGFix.childFix = function(elm) {
 157      // "hasLayout" fix for unclickable children inside PNG backgrounds.

 158      var tags = [
 159              'a',
 160              'input',
 161              'select',
 162              'textarea',
 163              'button',
 164              'iframe',
 165              'object'
 166          ],
 167          t = tags.length,
 168          tFix = [];
 169      while (t--) {
 170          var pFix = elm.all.tags(tags[t]),
 171              e = pFix.length;
 172          while (e--) {
 173              tFix.push(pFix[e]);
 174          }
 175      }
 176      t = tFix.length;
 177      if (t && (/relative|absolute/i).test(elm.currentStyle.position)) {
 178          alert('IEPNGFix: Unclickable children of element:' +
 179              '\n\n<' + elm.nodeName + (elm.id && ' id=' + elm.id) + '>');
 180      }
 181      while (t--) {
 182          if (!(/relative|absolute/i).test(tFix[t].currentStyle.position)) {
 183              tFix[t].style.position = 'relative';
 184          }
 185      }
 186  };
 187  
 188  
 189  IEPNGFix.hook = function() {
 190      if (IEPNGFix.hook.enabled) {
 191          IEPNGFix.process(element, 0);
 192      }
 193  };
 194  
 195  
 196  IEPNGFix.process(element, 1);
 197  
 198  </script>
 199  </public:component>