WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

IE6で透過PNGを表示させる　IE PNG Fix

   

話題としては今さら感がありますが、Internet Explorerのバージョン6（以下IE6）は透過PNG画像が表示されないという問題があります。しかし、IE6のブラウザシェアは減少傾向にありつつも依然20%前後を保っており（YouTubeなどはIE6のサポートをすでに打ち切ってるが……）、サイト制作者がIE6ユーザーを切り捨てる選択をするのは難しいのが現状です。 一方、透過PNG画像を表示させる方法として知られているのが、IE PNG Fixです。ここのサイトでダウンロードできます。 設定方法は簡単でまずiepngfixフォルダの中から、 iepngfix.htcというHTCファイルと、 blank.gifというGIF画像ファイルを用意します。 iepngfix.htcをテキストエディタなどで開くと、始めの部分は次のようになっているので、 
...........
...........
// 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が適用されます。

 - JavaScript/Ajax, ブラウザ , ,