Movable Type 備忘録

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

Sep162006
Author: bzbell
Categories: Tools
Tags: Alpha-Channel PNG

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

みなさんご存知だと思いますが、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>

青い字の部分で背景画像を指定します。
赤い字の部分でαチャンネル付きPNG画像を指定しています。

最後に、JavaScriptを呼び出すコードは以下のようになります。先ほどの任意のIDをパラメータで指定します。

<body onload="changeImage('alpha-ch');">

ページが表示されるタイミングでJSを実行させます。今回のわたしの記事では、リンククリックのタイミングでJavaScriptを実行させました。そのコードは以下に用になります。

<a href="#" onclick="changeImage('alpha-ch'); return false;">αチャンネル適用</a>

なお、blank.gifという透明GIFが必要なので、こちら透明GIFからお持ち帰りください。

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

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

Trackback Pings(0)

Comments(0)

Post a Comment