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

Question

So, I'm using CSS3 in order to create sidebar boxes in my site design, this works nice and dandy. Using http://css3pie.com in order to create the effect in IE.

Again, nice and dandy. Now, comes my issue -

For each relatively positioned module, there is an absolutely positioned icon within it, that is set to being top: -20px in order to give it a pop-out effect. Obviously this doesn't work in IE6, as well it doesn't play nice with any PNG fix codes.

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

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

I have yet to find a reasonable solution for this idea. I could use an IE6 stylesheet to replace the images - however there are several instances where images shouldn't be CSS-based. They should be proper images.

Any suggestions? I wanted some sort of a jQuery replace, but I haven't found a reasonable solution for that either.

Answer 1

This should work for all non-CSS images on the page:

// 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'); 
            }
        });
    }
});

Answer 2

You can use this PHP code in the CSS to know what browser is being used:

<?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 3

There are several solutions. Probably the easiest would be to create a jQuery function that was called when the user switches to the low-fi site (by link) or you determine this on their behalf (by headers or conditional comment).

The jQuery function could utilize attribute selectors to make life easier.

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

To switch the CSS backgrounds, I would recommend classing them with degrade or something of the sort to create a hook for jQuery, then doing something similar as the above.

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

Of course, you will need to modify the code above base on your markup, but that should get you started.

Answer 4

Do you want to know how to replace the elements or how to get the browser/version?

jQuery has facilities for both.

Getting the browser is straightforward. just use jQuery.browser.

To change the images would require a different approach for CSS vs. <img>. Set everything to use PNG's and then do something like:

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