IE6 ロールオーバーも透過pngにする「DD_belatedPNG.js」(2)背景が表示されない時の対応も解説。

▼以前の記事(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]-->

↑こちらではなく↓こちらを<head>に入れる。
(画像名に応じて「"_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]-->

2. <article><section><aside>などhtml5セレクタを背景pngにした場合は透過しない。

<article>など使わず→<div class="○○">で対応する。

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"));
		});
}
});