DD_belatedPNGとスマートロールオーバーの互換性について

IE6でPNGファイルを透過させるスクリプト
「DD_belatedPNG」

スマートロールオーバー
「smartRollover.js」もしくは「rollover.min.js」

png画像のimg要素をa要素で囲んでリンクボタンとして、
img要素をロールオーバーさせたい場合は<head>内の記述を変更

変更前

<script type="text/javascript">
    DD_belatedPNG.fix('img, .png_bg');
</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>

これでPNG画像をロールオーバー可能

三十路ママ日記

2011年4月17日　元気なムスコくんが誕生！

DD_belatedPNGとスマートロールオーバーの互換性について