Replacing image extensions in jQuery, moving from .png to .gif on the fly

Question

So, I use CSS3 to create sidebars in my site design, this works well and dandy. Using http://css3pie.com to create an effect in IE.

Again, honey and dandy. Now my problem comes -

For each relatively positioned module, it has an absolutely positioned icon, which is set as the top: -20px to give it a pop-up effect. Obviously, this does not work in IE6, and also works well with any PNG fix codes.

However, for IE6 users, I can switch to a low-quality gif, and they can handle it.

Now, my question is: how do I manage to live - switch image.png to image.gif if the user uses IE6?

I have yet to find a reasonable solution to this idea. I could use the IE6 stylesheet to replace images - however, there are a few examples where images should not be based on CSS. They must be correct images.

Any suggestions? I wanted some jQuery to replace, but I also did not find a reasonable solution.

Answer 1

There are several solutions. Probably the easiest would be to create a jQuery function that was called when the user switches to a low-level site (via a link), or you define it on your behalf (with headers or conditional comments).

The jQuery function can use an attribute selector to make life easier.

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

CSS, degrade - , hook jQuery, - , .

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

, , .

Answer 2

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 a .png in the source, I'll assume it 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'); 
            }
        });
    }
});

Answer 3

PHP- CSS, , :

<?php
$useragent = $_SERVER[‘HTTP_USER_AGENT’]);
if (preg_match(‘|MSIE ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘IE’;
    echo ... ;//css selector for Internet Explorer and so on...
} elseif (preg_match( ‘|Opera ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Opera’;
} elseif(preg_match(‘|Firefox/([0-9\.]+)|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Firefox’;
} elseif(preg_match(‘|Safari/([0-9\.]+)|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Safari’;
} else {
// browser not recognized!
$browser_version = 0;
$browser= ‘other’;
}
?>

Answer 4

, /?

jQuery .

. jQuery.browser.

CSS <img>. , 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');
    };
}