jQuery Plugins IE Png fixでIE6に透過pngを適用

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を使ってる方は是非、乗換えをっ(笑)

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください