IE6でアルファチャンネルを含むPNGを表示する
yamaokaです。
webサイトで背景が透明な画像を使用する場合、画像を透過GIFまたはアルファチャンネルを含むPNGで作成する必要があります。どちらを使用してもかまわないのですが、下図のように背景を指定した場合はPNGの方がきれいにアンチエイリアスがかかります。
透過GIFとアルファチャンネルを含むPNGの比較 posted by (C)フォト蔵
PNGを使いたくなるところですが、Internet Explorer 6（以下IE6）はアルファチャンネルに対応していないので、一工夫する必要があります。IE6でアルファチャンネルを含むPNGを表示するには、IE6のフィルタ機能であるAlphaImageLoaderを使用します。フィルタを使用すると、画像としてではなく要素の背景のように振る舞います。したがって、表示させるにはIE6でアクセスがあった場合のみ以下のような処理を行えばよいことになります。
- imgタグのsrc属性を透過GIFに入れ替える（見えない）
- imgタグのフィルタとしてAlphaImageLoaderを使用、本来表示させたい画像を指定する
では、実装例です。縦横が1ピクセルの透過GIFファイルを用意し、下記のJavaScriptをロードします（ライブラリとしてPrototype.jsを使用しているので、併せてロードしてください）。
var AlphaChanneledPNG = Class.create();
AlphaChanneledPNG.prototype = {
initialize: function(imgId, blankImgSrc) {
this.imgId = imgId;
this.blankImgSrc = blankImgSrc;
Event.observe(window, 'load', this.show.bind(this));
},
show: function() {
if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
imgObj = $(this.imgId);
orgSrc = imgObj.src;
imgObj.src = this.blankImgSrc;
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader("
+ "src='" + orgSrc + "', sizingMethod='scale')";
}
}
};
そして、アルファチャンネルを含む画像が指定されているimg要素にidを設定し、下記のようにオブジェクトを生成します。1つめの引数には対象のimg要素のidを、2つめの引数には用意しておいた透過GIFのパスを指定します。そうすることで、ページのロードが完了するタイミングでフィルタが適用されます。
var foo = new AlphaChanneledPNG('foo', '/path/to/blank.gif');
Internet Explorer 7ではアルファチャンネルがサポートされたので、フィルタを使用する必要はありません。また、上述のような処理を行うことにより、IE6に限って画像の上で右クリックして画像を保存する、という動作が行えなくなってしまうので注意する必要があります。
【追記（2007年02月07日）】
下記の各記事で紹介されているような方法を使ってもIE6でアルファチャンネルーを含むPNG画像を正常に表示することができます。
