Movable Type 備忘録

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

  • Dec232006
  • Vote:
    http://bizcaz.com/archives/2006/12/23-144858.php
  • Categories: Tools
  • Tags:
  • Social Bookmark

以前、IE6でαチャンネルPNG画像を表示するで、JavaScriptを使用してαチャンネル付きPNG画像をIE6で表示する方法をご紹介しました。

前回の方法では、透過させたいPNG画像を個別に指定して表示させる方法でした。
でも使い勝手があまりよくありませんでした。

今回はもっと使い勝手のいい、実用的な方法でαチャンネル付きPNG画像を表示してみたいと思います。

基本的には前回と同様にJavaScriptを使うことになります。
こちらのIE PNG Fix v1.0 RC4で紹介しているスクリプトを使用することで、αチャンネル付きPNG画像を表示させることができました。

  • アルファチャンネル付きPNG画像をIE6で表示させています。

上記例では以下のようにしてαチャンネル付きPNG画像を表示させています。

  1. <ul id="alpha-bg">
  2. <li>アルファチャンネル付きPNG画像をIE6で表示させています。</li>
  3. <li class="alpha-ch"></li>
  4. <li class="alpha-ch"></li>
  5. </ul>

スクリプトをアップロードします

まず、こちらのIE PNG Fix v1.0 RC4から、iepngfix.zipという圧縮ファイルをダウンロードします。
適当なフォルダに展開して、iepngfix.htcとblank.gifを各自の環境に合わせてアップロードします。

アップロード先はどこでも構いませんが、iepngfix.htcとblank.gifを別々な場所にアップロードする場合には、iepngfix.htc内の以下のコードを各自の環境に合わせて修正します。

  1. 14行目
  2.  
  3. if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

青い字の部分を各自の環境に合わせて修正します。

テンプレートを変更します

αチャンネル付きPNG画像を表示させたいテンプレート内の<head>～</head>の間に以下を追加します。

  1. <style type="text/css">
  2. img, div, li { behavior:url(iepngfix.htc) }
  3. </style>

青い字の部分には、iepngfix.htcを格納したURLを指定します。
赤い字の部分は、αチャンネル付きPNG画像を表示する要素を指定します。

たとえば、上記で表示しているPNG画像は<li class="alpha-ch">の背景にPNG画像を表示させているのでli要素を追加しています。
このようにして、PNG画像を背景として表示する要素を追加していきます。

ちなみに特定の要素のみ指定したい場合には以下のようになります。

  1. ul#alpha-bg li { behavior:url(iepngfix.htc) }

CSSを修正します

最後に、CSSを使ってPNG画像を背景に指定するだけで表示させることができます。
上記で表示しているPNG画像では以下のように指定しています。

  1. ul#alpha-bg { height:220px; width:400px; list-style:none; background:url("checkerboard.gif"); }
  2. ul#alpha-bg li.alpha-ch { height:200px; width:200px; float:left; background:url("opacity.png"); }

以上で、IE PNG Fix v1.0 RC4を使用したαチャンネル付きPNG画像を、IE6で表示させることができました。
CSSを使って、複数のPNG画像表示が可能になるので、とっても便利かと思います。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード