WEBサイトにおいて、「Internat Explorer 6」で「.png」の透過画像を表示することができないことを解決するjQueryプラグインをご紹介です。
もう、かなりIE6を利用しているかたも減ってきているようですが、企業などは無視するワケにはいかないのでまだ、IE6対策は必要です。
使い方は簡単でimg要素のsrc属性を調べ、pngファイルだったら適用させるようにします。
jQuery.js をダウンロードします。
jquery.pngfix.js をダウンロードします。
二つのファイルを任意のフォルダにアップロードします。ここではトップディレクトリに「js」フォルダを作成したと仮定して説明します。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.pngfix.js"></script>
htmlファイルのhead内に上記の記述をします。
そのスグ下に以下の記述も加えます。
<script type="text/javascript"> $(document).ready(function() { $(".iepngfix").pngfix(); //class名が一致したら適用する $("img[@src$=png]").pngfix(); //imgタグの語尾がpngなら適用する }); </script>
CSSの背景画像に適用させるには、クラス名に「iepngfix」をつければ適用されます。
これで、<img>タグでのpng画像挿入も、cssの背景指定でpngを使用しても透過が適用されます。
簡単ですね!
まだIE6を使ってる方は是非、乗換えをっ(笑)