カテゴリー: lte IE 9

IE9以前

IE6でも透過pngを使おう。DD_belatedPNGのメモ

使い方はコチラ
http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/

設定の変更を忘れがちなので注意。下記みたいに。

DD_belatedPNG.fix('img');

スマートロールオーバーと併用する時は以下の記述を追加しよう。
理由は以下のページ。
http://d.hatena.ne.jp/mi_kattun/20100324/1269444160
同じ理由でz-indexがうまくきかなくなって嵌ることもあるので気をつけよう。まじで。

<script type="text/javascript src="～/DD_belatedPNG_0.0.8a-min.js"></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>

IE7や6でもhrを画像にしたい！

いろいろやり方があるのです。

水平線画像を繰り返しにしない場合はコチラを使おうと思う。
http://www.hrtag.info/hrcssimg

水平線画像を繰り返しにする場合は、こちらの方法を参考に。
ちょっとソースが煩雑になるけど。
http://internet.designcross.jp/2010/09/csshr.html