JSFiddle - React, Tailwind, and code Playground

by keif

HTML

<img src="http://weblogs.mozillazine.org/asa/ff-logo-big.png" alt="Test One" width="439" height="422" id="test1" class="class1" title="test title one"/>
<img src="http://weblogs.mozillazine.org/asa/ff-logo-big.png" alt="Test Two" width="439" height="422" id="test2" style="float: left; border: 1px solid #000"/>
<img src="http://weblogs.mozillazine.org/asa/ff-logo-big.png" alt="" width="439" height="422" />
<img src="http://weblogs.mozillazine.org/asa/ff-logo-big.png" alt="" width="439" height="422" />

JavaScript

$.fn.pngFix = function(settings) {
    // Settings
    settings = $.extend({
        blankgif: 'http://www.thelimited.com/assets/common/spacer.gif'
    }, settings);

    //fix images with png-source
    $(this).find('img[src$=.png]').each(function() {
        $el = $(this);

        var rSpan = $(document.createElement('span'));
        var prevSpan = null;
        rSpan.id = ($el[0].id) ? $el[0].id : '';
        rSpan.className = ($el[0].className) ? $el[0].className : '';
        rSpan.title = ($el[0].title) ? $el[0].title : '';
        rSpan.alt = ($el[0].alt) ? $el[0].alt : '';
        rSpan.css({
            'cursor': ($el.parent().attr('href')) ? 'hand' : 'default',
            'float': ($el.attr('align')) ? $el.attr('align') : '',
            'height': $el.height(),
            'position': ($el.css('position')) ? $el.css('position') : 'relative',
            'width': $el.width()
        });
        rSpan[0].runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + $el[0].src + "',sizingMethod='scale')";

        if ($el.css('border') || $el.css('margin') || $el.css('padding')) {
            prevSpan = $(document.createElement('span')).css({
                'border': ($el.css('border')) ? $el.css('border') : '',
                'margin': ($el.css('margin')) ? $el.css('margin') : '',
                'padding': ($el.css('padding')) ? $el.css('padding') : ''
            });
        }
        rSpan.attr('style', ($el.attr('style')) ? $el.attr('style') : '');

        if (prevSpan) {
            rSpan.appendTo(prevSpan);
            $el.after(prevSpan);
        }
        else {
            $el.after(rSpan);
        }
       
        $el.remove();

    });

    // fix css background pngs
    $(this).find("*").each(function(){
        var bgIMG = $(this).css('background-image');
        if(bgIMG.indexOf(".png") !== -1){
            var iebg = bgIMG.split('url("')[1].split('")')[0];
            $(this).css('background-image', 'none');
    ...