Movable Type 備忘録

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード