IE6では半透明のPNG画像がうまく表示されません。透明の箇所は灰色のような色になってしまいます。
これをなんとかする方法はいくつかありどの方法も一長一短なのですが、今回はjquery.pngFixというjQueryのプラグインを紹介します。
jquery.pngFix
http://jquery.andreaseberhard.de/pngFix/
1．上記サイトからjquery.pngFix.jsを入手し、jQueryの最新版も用意します。
2．HTMLからjQueryとjquery.pngFix.jsを読み込みます。
<script type="text/javascript" src="http://xxx.co.jp/jquery-1.x.x.js"></script> <script type="text/javascript" src="http://xxx.co.jp/jquery.pngFix.js"></script>
3．半透明にしたい箇所をclassを設定しておきます。
今回はclass=”pngfix”としておきます。
4. Javascriptで次のように指定します。
<script type="text/javascript">
//全てドキュメント、画像を読み込んだら自動実行
$(window).load(function(){
//class="pngfix"内の画像全てを半透明にする
$(".pngfix").pngFix();
});
</script>
今回のソースを全て書くとこんな感じになります。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.pngFix.js"></script> <script type="text/javascript"> //<![CDATA[ $(window).load(function(){ $(".pngfix").pngFix(); }); //]]> </script> </head> <body> <div class="pngfix"> <img src="images/test.png" alt="testing" /> </div> </body> </html>
注意点は
・幅・高さをきちんと指定する
画像の幅・高さが拡大縮小されてしまい、画像が崩れてしまうことがあります。
・font-sizeを小さくします
font-sizeが画像の幅・高さより大きい場合、画像が崩れてしまいます。
・$(document).readyではなく$(window).loadを使う
$(document).readyはドキュメントを読み込んだら実行するため、画像の読み込みが終わる前に半透明の処理をする場合があります。
そのため処理速度の遅いPC（Atom搭載機）等では画像が崩れることがあります。
・imgタグとbackgroundのみにしか有効じゃない
ulのlist-style-mageで指定された画像は半透明になりません。
・IE Developer Toolbarを入れる
割と安定しているプラグインですが、それでも微妙に半透明後に位置がずれたり、縦横の比がおかしくなってしまうことがあります。
このプラグインはIE6でしか動かないため、Firebug等のIE6以外の便利ツールを使うことができません。
IE6用のツールを入れておかなければハマってしまうことがあります。
ちなみに内部の処理的には元のimgタグをdisplay:noneにし、spanで半透明に対応した画像を差し込むというようなことをしています。
imgタグのCSSではなく、該当箇所のspanを調整することがあります。
SEO対策的にはJavascriptをHTML内に書かないほうがよいので、外部ファイル化するやり方も書いておきます。
1.下記のコードを、start_png_fix.jsなどというファイル名で保存します。
function start_png_fix() {
$(window).load(function(){
//class="pngfix"内の画像全てを半透明にする
$(".pngfix").pngFix();
});
}
window.onload = start_png_fix;
2.jquery.pngFix.jsの後に、start_png_fix.jsを読み込みます。
//サンプル <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.pngFix.js"></script> <script type="text/javascript" src="js/start_png_fix.js"></script>