IE6で透過PNGを表示させる IE PNG Fix
........... ........... // IE5.5+ PNG Alpha Fix v2.0 Alpha // (c) 2004-2009 Angus Turnbull http://www.twinhelix.com // This is licensed under the GNU LGPL, version 2.1 or later. // For details, see: http://creativecommons.org/licenses/LGPL/2.1/ var IEPNGFix = window.IEPNGFix || {}; IEPNGFix.data = IEPNGFix.data || {}; // CONFIG: blankImg is the path to blank.gif, *relative to the HTML document*. // Try either: // * An absolute path like: '/images/blank.gif' // * A path relative to this HTC file like: thisFolder + 'blank.gif' var thisFolder = document.URL.replace(/(\\|\/)[^\\\/]*$/, '/'); IEPNGFix.blankImg = thisFolder + 'blank.gif'; IEPNGFix.fix = function(elm, src, t) { ........... ...........GIF画像のパスを設定する次の行を書き換えます。ただし、変数thisFolderにはHTCファイルと同じ階層を示すURLが入っているので、もしHTCファイルと同じフォルダにGIFファイルを入れているならば変更する必要はありません。
IEPNGFix.blankImg = thisFolder + 'blank.gif';書き換えが終わったらHTCファイルとGIFファイルをサイトの適切な場所にアップロードします。 次にIEPNGFixを適用したいCSSセレクタに次のようなコードを書き加えます。画像は大抵、imgタグやdivタグ/リンクタグのbackground-imageプロパティなどに設定されることが多いので、img/div/a/inputタグが対象になるでしょう。
/* CSSファイルに書き込む場合 */ img, div, a, input { behavior: url(iepngfix.htc); }注意点: behaviorプロパティに設定するURLは、特に外部ファイルで呼び出す場合フルパスで指定するのが無難です。
/* フルパス指定の例 */ img, div, a, input { behavior: url(http://wiz-code.digick.jp/css/iepngfix.htc); }通常のページならばこの方法で十分なんですが、後からJavaScriptで動的に画像を読み込むケースでは、それらの画像にIE PNG Fixが適用できないデメリットがあります。そのため、JavaScriptを使用するページでは、CSSの設定をJavaScript側で動的に行うのがベターです。 方法としてはまず、次のような内容のCSSファイルを別途用意し、
/* ie_png_fix.css */ img, div, a, input { behavior: url(iepngfix.htc); /* URLはフルパスで記述してください */ }すべての画像を読み込んだ後に、JSファイルに次のようなコードを追加し、呼び出すCSSファイルのパスを書き換えます。
//ブラウザがIE6のときだけ分岐 if (typeof document.body.style.maxHeight == 'undefined') { var headTag = document.getElementsByTagName('HEAD').item(0), linkTag = document.createElement('LINK'); linkTag.setAttribute('href', 'css/ie_png_fix.css'); //第2引数には上記のCSSファイルのURLを入れる linkTag.setAttribute('type', 'text/css'); linkTag.setAttribute('rel', 'stylesheet'); headTag.appendChild(linkTag); }これで使用されるすべての画像にIE PNG Fixが適用されます。