Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

IE6でαチャンネルPNG画像を表示する

Sep162006
Vote:
http://bizcaz.com/archives/2006/09/16-183157.php
Categories: Tools
Tags: Alpha-Channel PNG
Social Bookmark

Prev Page: GrayBit
Next Page: 時の流れを忘れさせる時計

みなさんご存知だと思いますが、IE6ではαチャンネル付きPNG画像を普通に表示しても透過されません。 AlphaImageLoaderを使わないとダメらしいんです。

でも、JavaScriptを使ってAlphaImageLoaderによるαチャンネル付きのPNG画像を表示させることができるようなのでご紹介します。

このページをIE6で開いて、こちらの「αチャンネル適用」をクリックしてみてください。今まであきらめていた、IE6でのαチャンネルPNG表示がJavaScriptを使うことで、こんなカンタンに透過されちゃいます。

αチャンネル付きPNG画像を表示する

使い方はカンタンです。以下のJavaScriptを適当な名前でファイルに保存して、各自の環境に合わせてサーバにアップロードします。ほとんどのテンプレート内で定義されているmt-site.jsの中に追加してもいいかもしれませんね。

function findElement(n) {
return document.all ? document.all(n) : document.getElementById(n);
}
function changeImage(id) {
var obj = findElement(id);
if(obj.runtimeStyle){
var image = obj.src;
obj.src = "blank.gif";
obj.runtimeStyle.filter =
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + image + '", sizingmethod="image");';
}
}

そして、αチャンネルPNG画像を表示する際に、任意のIDを指定します。たとえば、上記イメージは以下のように指定しています。

<div>
<style type="text/css">
.bgimage { background: url(http://bizcaz.com/image/zu/alpha-bg.png) no-repeat top center; height:190px; }
</style>
<div class="bgimage">
<img src="http://bizcaz.com/image/zu/alpha-fg.png" id="alpha-ch" width="180" height="180" alt="" /><br />
</div>
</div>