3


0

jQueryの画像拡張機能を置き換え、その場で.pngから.gifに移動します

ですから、サイトデザインでサイドバーボックスを作成するためにCSS3を使用しています。これはうまく機能します。 IEで効果を作成するためにhttp://css3pie.comを使用します。

繰り返しますが、素敵でダンディです。 さて、私の問題が来ます-

相対的に配置された各モジュールには、その中に絶対配置されたアイコンがあり、ポップアウト効果を与えるために、トップに設定されています:-20px。 明らかにこれはIE6では機能せず、PNG修正コードでもうまく動作しません。

ただし、IE6ユーザーの場合は、代わりに低品質のgifに切り替えることができ、それに対処できます。

さて、私の質問は、ユーザーがIE6を使用している場合、image.pngをimage.gifにライブスイッチするにはどうすればよいですか?

私はこのアイデアの合理的な解決策をまだ見つけていません。 IE6スタイルシートを使用して画像を置き換えることができますが、画像をCSSベースにするべきではない場合がいくつかあります。 適切な画像である必要があります。

助言がありますか? 何らかのjQueryの置き換えを望んでいましたが、そのための合理的な解決策も見つかりませんでした。

4 Answer


8


いくつかの解決策があります。 おそらく最も簡単な方法は、ユーザーが(リンクによって)low-fiサイトに切り替えるときに呼び出されるjQuery関数を作成するか、ユーザーに代わって(ヘッダーまたは条件付きコメントによって)これを決定することです。

jQuery関数は、属性セレクターを利用して作業を簡単にすることができます。

function switch_to_low_fi() {
        $('img[src$=".png"]').each(function(index,element) {
          element.src = element.src.replace('.png','.gif');
        });
}

CSSの背景を切り替えるには、 `degrade`またはjQueryのフックを作成するようなものでクラスを分類し、上記と同様のことを行うことをお勧めします。

        $('.degrade').each(function(index,element) {
          element = $(element);
          var background = element.css('background-image');
          background = background.replace('.png','.gif');
          element.css('background-image', background);
        });

もちろん、マークアップに基づいて上記のコードを変更する必要がありますが、それで開始できます。


0


これは、ページ上のすべての非CSS画像で機能するはずです:

// when DOM is loaded
jQuery(document).ready(function(){
    // and browser is MSIE 6 or lower
    if (jQuery.browser.msie && jQuery.browser.version <= 6) {
        // go through every IMG
        jQuery('img').each(function(index,element){
            // if there's a .png in the source, I'll assume it's at the end
            // (of course, more complex test could be made) ...
            if (element.src.indexOf('.png') != -1) {
                // ...and replace it with a GIF version
                element.src = element.src.replace('.png','.gif');
            }
        });
    }
});


0


CSSでこのPHPコードを使用して、使用されているブラウザを確認できます。



0


要素を置き換える方法、またはブラウザ/バージョンを取得する方法を知りたいですか?

jQueryには両方の機能があります。

ブラウザを取得するのは簡単です。 `jQuery.browser`を使用してください。

画像を変更するには、CSSとVSで異なるアプローチが必要です。 ``. すべてをPNGを使用するように設定してから、次のようなことを行います。

if ( useGIF() ) {
    var src;
    $('img').each(function() {
        src = $(this).attr('src');
        $(this).attr('src', src.substr(0, src.length-3) + 'gif');
    };
    $('.has_bg_png').each(function() {
        src = $(this).css('background-image');
        $(this).css('background-image', src.substr(0, src.length-3) + 'gif');
    };
}