通常、IE6以下では透過PNGは使えなくて、透明度を設定した部分はグレーで表示されてしまう。IE独自のフィルター機能は意外とめんどー。そこで、IE6で透過PNGを使えるようになるにjQueryのライブラリがあります。
jQueryを使ってる時は導入しやすいですね。
下記2つは名前ほぼ同じだけど、違う種類みたいです。
■jquery.pngfix.js
こちらはCampbells Digital Soupという海外のサイトで配布されてるjqueryライブラリー
[バグは以下のとおり]
*わかり次第記載します
【使用方法】
1. まずはjQuery(現ver.jquery-1.3.1.min.js)とjQueryプラグイン「jquery.pngfix.js」をダウンロード
2. htmlの<head>内などに下記を記述して読み込み、jQuery(現ver.jquery-1.3.1.min.js)とjquery.pngfix.jsをアップロード。
<script src="jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.pngfix.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // ここに指定コードを記述します。 </script>
3. 指定コードを記述する。
[ <img>タグに指定する場合 ]
$(document).ready(function() {
$("img[@src$=png]").pngfix();
});
[ 特定のidやclassに指定する場合 ]
$(document).ready(function() {
$("img[@src$=png], #image-one, .image-two").pngfix();
});;
■jquery.pngFix.js
こちらはここの海外のサイトで配布されてるjqueryライブラリー
[バグは以下のとおり]
*わかり次第記載します
【使用方法】
1. まずはjQuery(現ver.jquery-1.3.1.min.js)とjQueryプラグイン「jquery.pngFix.js」をダウンロード
2. htmlの<head>内などに下記を記述して読み込み、jQuery(現ver.jquery-1.3.1.min.js)とjquery.pngfix.jsをアップロード。
<script src="jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.pngFix.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">????$(document).ready(function(){? ????????$(document).pngFix();? ????});</script>
これでどんな指定でも出来るらしいです。チョー簡単 詳しくはjquery.pngFix.jsページへ
実際使ってみて合うほう選べばいいですね。
■jQuery初心者の方はこちらの本がおすすめです。
Popularity: 77% [?]
関連記事
- Newer: [CSS]透過PNG画像をIE6で適用させる
- Older: [Javascript]透過PNG画像をIE6で適用させる
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://www.web-milk.com/articles/jquery/%ef%bd%8aquery%e9%80%8f%e9%81%8epng%e7%94%bb%e5%83%8f%e3%82%92ie%ef%bc%96%e3%81%a7%e9%81%a9%e7%94%a8%e3%81%95%e3%81%9b%e3%82%8b.html/trackback
- Listed below are links to weblogs that reference
- [jQuery]透過PNG画像をIE6で適用させる from Webデザイナーメモ|Webmilk