▼以前の記事(IE6で透過pngを表示させる基本的手順)
http://d.hatena.ne.jp/soratomo0714/20120627
以前の記事では「4.画像置換(ロールオーバー)を設定する場合は・・・」で、ロールオーバーは使えないのでcssで設定するとしましたが、head内にソースを少し足せばDD_belatedPNG.jsで実装できますのでご紹介します。
ロールオーバを透過png対応にする方法
▼「DD_belatedPNG_0.0.8a-min.js」のダウンロード等はこちらをご参考ください。
http://d.hatena.ne.jp/soratomo0714/20120627
早速、本題になりますが。。
↑以前は「<head>に↓を入れる」と書きましたが、記載内容を変更します。
<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> <script> DD_belatedPNG.fix('img, .png_bg'); </script> <![endif]-->
(画像名に応じて「"_off."」「"_on."」はお好きに書き換えてください)
<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> <script type="text/javascript"> var oldFixPng = DD_belatedPNG.fixPng; DD_belatedPNG.fixPng = function (el) { oldFixPng(el); if (el.vml && el.vml.image.fill.getAttribute("src").match(/_off\./)) { el.vml.image.shape.attachEvent('onmouseenter', function() { var image = el.vml.image.fill; image.setAttribute("src", image.getAttribute("src").replace("_off.", "_on.")); }); el.vml.image.shape.attachEvent('onmouseleave', function() { var image = el.vml.image.fill; image.setAttribute("src", image.getAttribute("src").replace("_on.", "_off.")); }); } }; DD_belatedPNG.fix('img, .png_bg'); </script> <![endif]-->
あと、以前記載しなかった背景(background)に透過pngを使用した場合の問題点&対策を2点記します。
1. position:relativeにしたdivの背景にpngを使用すると背景が表示されない場合がある。
<head>に記載した下記htmlを変更
<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> <script> DD_belatedPNG.fix('img, .png_bg'); </script> <![endif]-->
<!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> <script> DD_belatedPNG.fix('img'); $(document).ready(function(){ DD_belatedPNG.fix('.png_bg') }); </script> <![endif]-->
IE6だけgif画像に変更する
色々試したけど、どうしても透過しない場合は、
IE6以外はpng、IE6だけgifに変更するって方法もあります。
*画像はpngとgif両方(_on、_offもそれぞれ)容易する。
(gifでも保存する時に「透明部分」にチェックを入れると幾分きれいです)
↓下記コードをお使いください。
*id名「toGif」の中にあるimg(画像)を○○_off.png→○○_off.gif(○○_on.png→○○_on.gif )に変更する。
$(function(){ if (isIE && (verIE==="6")){ $("#toGif img").each(function(){ imgsrc = $(this).attr("src"); $(this).attr("src", imgsrc.replace(".png",".gif")); }); } });