ここ最近、ブラウザの進化と共にアルファチャンネルを含むPNG画像を
使用しているサイトが多くなってきています。

PNG画像はFirefoxやSafari、IE7などは対応となっていますが
やはり問題なのは「IE6」。
このブラウザはPNG画像の透過が対応していません。

使用する際はライブラリを使用する必要がありますが、
今日はそれらのメモ書きです。

以下が代表的なIE6でのPNG透過用ライブラリ。

・iepngfix.js
「iepngfix.js」ファイルをページ上に設置し、
CSS上で効果を効かせる要素に対して、
「behavior: expression(IEPNGFIX.fix(this));」
といった指定を加えます。

・alphafilter.js
「alphafilter.js」ファイルと「prototype.js」をページ上に設置し、
効果を効かせる要素に対して、
「class=”alphafilter”」
の指定を加える。

・jquery.pngfix.js
「jquery.pngfix.js」ファイルと「jquery.js」ファイルを設置し、
<script type=”text/javascript”>
$(document).ready(function(){
$(‘div#sample’).pngFix( );
});
</script>
といった具合にID要素を指定。

PNG画像をimgとして貼り付ける場合や背景画像として使用する場合など
分けられますが、それぞれ使い分けるといいと思います。

これらを使用することでIE6でPNG画像を透過することは可能ですが、
問題点もあったりします。

1.背景画像として連続表示することは不可。
2.PNG透過指定をするエリア上にリンク(テキスト&画像)を設置してもクリックができなくなる。

これが結構致命的だったり…

問題点を回避する為に、記述が余計に増えたりするのは考え物です。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

IE6でPNG画像を透過させる方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR