pngの半透明2

css javascript

id:oppara:20070420

  • AlphaImageLoaderのsizingMethod
    • crop（オブジェクトのサイズを優先させる）
    • image（イメージのサイズを優先させる）
    • scale（オブジェクトのサイズにイメージのサイズを合わせる）
<html>
<body>
<div id="hoge">
  <p><a href="#">hogehoge</a></p>
  <div class="alpha"></div>
</div>
<div class="moge">mogemoge</div>
<div class="moge">mogemoge</div>
</body>
</html>

window.onload = function() {
  new OpacityPngObject( 'div#hoge', 'pin.png' ).setBackgroundWinLink();
  new OpacityPngObject( 'div.moge', 'pin.png' ).setBackground();
}


OpacityPngObject = function( selector, png ) {
  this.selector = selector;
  this.elements = $$( this.selector );
  this.png = png;
  this.useFilter = null;
  this.useBgImg  = null;
  this.prefix = 'ping-a1pha-';
  this._setOpacityMode();
  return this;
}

OpacityPngObject.prototype.setBackgroundWinLink = function() {
  if ( this.useFilter ) {
    var className = this.prefix 
                  + this.selector.replace( '#', '' ).replace( '.', '' );
    this.elements = this._makeAlphaDiv( className );
  }
  this.setBackground();
}

OpacityPngObject.prototype.setBackground = function() {
  var els = this.elements;
  for( var i = 0, len = els.length; i < len; i++ ) {
    if ( this.useFilter ) {
      els[i].style.filter 
        = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
        + this.png + "', sizingMethod='scale')";
    }
    else if ( this.useBgImg ) {
      els[i].style.backgroundImage = 'url(' + this.png + ')';
    }
    // else {
    //   var gif = this.png.replace( 'png', 'gif' );
    //   el.style.backgroundImage = 'url(' + gif + ')';
    // }
  }
  
}

OpacityPngObject.prototype._makeAlphaDiv = function( className ) {
  var els = this.elements;
  var ret = [];
  for( var i = 0, len = els.length; i < len; i++ ) {
    var el = els[i];
    el.style.position = 'relative';
//     el.style.height = '1px';             
    el.style.background = 'transparent';  
    for ( var i = 0, len = el.childNodes.length; i < len; i++ ) {
      var node = el.childNodes.item( i );
      if( node.nodeType != 1 ) { continue; }
      node.style.position = 'relative';
      node.style.zIndex = '3';
    }
    var div = document.createElement( 'div' );
    div.className = className;
    div.style.position = 'absolute';
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.width =  el.currentStyle['width'];
    div.style.height = el.currentStyle['height'];
    div.style.margin = '0';
    div.style.border = '0';
    div.style.zIndex = '1';
    el.appendChild( div );
    ret.push( div );
  }
  return ret;
}

OpacityPngObject.prototype._setOpacityMode = function() {
  if ( (browser.isIE55 || browser.isIE6x) && browser.isWin32 ) {
    this.useFilter = true;
  }
  if (  ( browser.isGecko ) 
     || ( browser.isSafari ) 
     || ( browser.isIE5up && browser.isMac ) 
     || ( browser.isIE7up && browser.isWin32 ) 
     || ( browser.isOpera && browser.isWin && browser.versionMajor >= 6 ) 
     || ( browser.isOpera && browser.isUnix && browser.versionMajor >= 6 ) 
     || ( browser.isOpera && browser.isMac && browser.versionMajor >= 5 ) 
     || ( browser.isOmniweb && browser.versionMinor >= 3.1 ) 
     || ( browser.isIcab && browser.versionMinor >= 1.9 ) ) {
            this.useBgImg = true;
    }
}

// '#id' or 'tag.class'
var $$ = function( selector ) {
  var ret = new Array();
  if ( selector.indexOf( '#' ) != -1 ) {
    var buf = selector.split( '#' );
    var el = document.getElementById( buf[1] );
    ret[0] =  el;
    return ret;
  }
    
  if( selector.indexOf( '.' ) > 0 ){ 
    var buf = selector.split( '.' );
    var tag = buf[0];
    var className = buf[1];
    var elements = document.getElementsByTagName( tag );
    var j = 0;
    for( var i = 0, len = elements.length; i < len; i++ ) {
      var elementClassName = elements[i].className;
      if ( elementClassName.length == 0 ) continue;
      if ( elementClassName == className ||
           elementClassName.match( new RegExp( "(^|??s)" + className + "(??s|$)" ) ) ) {
        ret[j] = elements[i];
        j++;
      }
    }
    return ret;
  }
}