ここ最近、ブラウザの進化と共にアルファチャンネルを含む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透過指定をするエリア上にリンク(テキスト&画像)を設置してもクリックができなくなる。
これが結構致命的だったり…
問題点を回避する為に、記述が余計に増えたりするのは考え物です。。。