IE6 does not support PNG image resolution

Introduction of Png.js file in head

<!--[If LTE IE 6]>
<script type= "Text/javascript" src= "Js/png.js" ></script>
<script>
Png.fix (' * ');
</script>
<! [endif]-->

The contents of the Png.js file are as follows:

/*** Png:adds IE6 support:png images for CSS background-image and HTML .* author:drew diller* Email: [Email  protected]* url:http://www.dillerdesign.com/experiment/png/* version:0.0.7a* Licensed under the MIT License: http://dillerdesign.com/experiment/PNG/#license * * Example usage:* png.fix ('. Png_bg '); argument is a CSS selector* png.fixpng (Somenode);  argument is a htmldomelement**//*please read:absolutely everything in this script is SILLY.  I know this.         IE ' s rendering of certain pixels doesn ' t make sense, so neither does this code!*/var PNG = {ns: ' PNG ', imgsize: {}, Createvmlnamespace:function () {/* Enable VML */if (document.namespaces &&!document.namespaces[t        HIS.NS]) {document.namespaces.add (this.ns, ' urn:schemas-microsoft-com:vml ');             } if (window.attachevent) {window.attachevent (' onbeforeunload ', function () {PNG = null;        }); }}, CreatevmlstYlesheet:function () {/* style VML, enable behaviors */* Just in case lots of other developers has a dded lots of other stylesheets using Document.createstylesheet and hits the 31-limit mark, let's not            Use that method! Further reading:http://msdn.microsoft.com/en-us/library/ms531194 (vs.85). aspx */var style = Document.create        Element (' style ');        Document.documentElement.firstChild.insertBefore (style, document.documentElement.firstChild.firstChild);        var styleSheet = Style.stylesheet;        Stylesheet.addrule (this.ns + ' \ \:* ', ' {behavior:url (#default #vml)} ');        Stylesheet.addrule (this.ns + ' \\:shape ', ' position:absolute; '); Stylesheet.addrule (' img. ' + this.ns + ' _sizefinder ', ' behavior:none; border:none; position:absolute; z-index:-1; top:- 10000px; Visibility:hidden; '); /* Large negative top value for avoiding vertical scrollbars for large images, suggested by James O ' Brien, Http://www.than Atopsic.org/hendrik/*/this.stylesheet = StyleSheet;        }, Readpropertychange:function () {var el = event.srcelement; if (Event.propertyName.search (' background ')! =-1 | | event.propertyName.search (' border ')! =-1) {PNG.APPLYVML (        EL); } if (Event.propertyname = = ' Style.display ') {var display = (El.currentStyle.display = = ' None ')?            ' None ': ' Block ';            for (Var v in el.vml) {el.vml[v].shape.style.display = display;        }} if (Event.propertyName.search (' filter ')! =-1) {png.vmlopacity (EL);  }}, Vmlopacity:function (EL) {if (El.currentStyle.filter.search (' Lpha ')! =-1) {var trans =            El.currentStyle.filter;            trans = parseint (Trans.substring (trans.lastindexof (' = ') +1, Trans.lastindexof (') ')), 10)/100; El.vml.color.shape.style.filter = El.currentStyle.filter; /* Complete guesswork */el.vml.image.fill.opacity =Trans /* Complete guesswork */}}, Handlepseudohover:function (EL) {setTimeout (function () {/* wouldn '        t work as intended without setTimeout */PNG.APPLYVML (EL);    }, 1);    },/** * This is the method to use in a document.        * @param {String} selector-required-a CSS selector, such as ' #doc. Container ' **/fix:function (selector) { var selectors = Selector.split (', ');  /* Multiple selectors supported, no need for multiple calls to this anymore */for (var i=0; i<selectors.length;  i++) {this.styleSheet.addRule (selectors[i], ' Behavior:expression (Png.fixpng (This)) ');/* seems to execute the function without adding it to the stylesheet-interesting ... */}, Applyvml:function (EL) {El        . Runtimestyle.csstext = ";        This.vmlfill (EL);        This.vmloffsets (EL);        This.vmlopacity (EL);        if (el.isimg) {this.copyimageborders (EL); }}, aTtachhandlers:function (EL) {var self = this;        var handlers = {resize: ' vmloffsets ', move: ' Vmloffsets '}; if (El.nodename = = ' A ') {var Moreforas = {mouseleave: ' Handlepseudohover ', MouseEnter: ' Handlepseudohover ', fo            Cus: ' Handlepseudohover ', Blur: ' Handlepseudohover '};            For (Var A in Moreforas) {Handlers[a] = Moreforas[a]; }} for (Var h-handlers) {el.attachevent (' on ' + H, function () {self[handlers[            H]] (EL);        });    } el.attachevent (' Onpropertychange ', this.readpropertychange);        }, Givelayout:function (EL) {el.style.zoom = 1;        if (el.currentStyle.position = = ' static ') {el.style.position = ' relative '; }}, Copyimageborders:function (EL) {var styles = {' BorderStyle ': true, ' borderWidth ': true, ' bordercolor '        : true}; For (var s in styles) {El.vml.color.shape.style[s] = El.currentstyLe[s];        }}, Vmlfill:function (EL) {if (!el.currentstyle) {return;        } else {var elstyle = El.currentstyle;        } for (Var v in el.vml) {el.vml[v].shape.style.zindex = Elstyle.zindex;        } El.runtimeStyle.backgroundColor = ";        El.runtimeStyle.backgroundImage = ";        var Nocolor = (Elstyle.backgroundcolor = = ' Transparent ');        var noimg = true; if (elstyle.backgroundimage! = ' None ' | | el.isimg) {if (!el.isimg) {EL.VMLBG = Elstyle.backgro                Undimage;            EL.VMLBG = El.vmlBg.substr (5, El.vmlBg.lastIndexOf (' ") ')-5);            } else {el.vmlbg = EL.SRC;            } var lib = this;                 if (!LIB.IMGSIZE[EL.VMLBG]) {/* Determine size of loaded image */var img = document.createelement (' img ');                LIB.IMGSIZE[EL.VMLBG] = img; Img.classname = lib.ns + ' _sizefinder ';                Img.runtimeStyle.cssText = ' Behavior:none; Position:absolute; left:-10000px; top:-10000px; Border:none; '; /* Make sure to set behavior to none to prevent accidental matching of the helper elements! */img.attachevent (' onload ', function () {this.width = this.offsetwidth;/* Weird cache- Busting requirement!                    */this.height = this.offsetheight;                Lib.vmloffsets (EL);                });                IMG.SRC = EL.VMLBG;                Img.removeattribute (' width ');                Img.removeattribute (' height ');            Document.body.insertBefore (IMG, document.body.firstChild);            } el.vml.image.fill.src = EL.VMLBG;        Noimg = false;        } El.vml.image.fill.on =!noimg;        El.vml.image.fill.color = ' None ';        El.vml.color.shape.style.backgroundColor = Elstyle.backgroundcolor;        El.runtimeStyle.backgroundImage = ' None '; El.runtimeStyle.backgroundCOlor = ' Transparent '; },/* IE can ' t figure out "what does when" the Offsetleft and the ClientLeft add up to 1, and the "VML ends up getting f        Uzzy. So we had to push/enlarge things by 1 pixel and then clip off the excess */vmloffsets:function (EL) {        var thisstyle = El.currentstyle; var size = {' W ': el.clientwidth+1, ' h ': el.clientheight+1, ' W ': this.imgsize[el.vmlbg].width, ' h ': THIS.IMGSIZE[EL.VMLBG        ].height, ' L ': el.offsetleft, ' T ': el.offsettop, ' BLW ': el.clientleft, ' BTW ': el.clienttop}; var fudge = (size. L + SIZE.BLW = = 1)?                1:0; /* VML shape, left, top, width, height, origin */var makevisible = function (VML, L, T, W, H, O) {vml.c            Oordsize = w+ ', ' +h;            Vml.coordorigin = o+ ', ' +o;            Vml.path = ' m0,0l ' +w+ ', 0l ' +w+ ', ' +h+ ' l0, ' +h+ ' XE ';            Vml.style.width = w + ' px ';            Vml.style.height = h + ' px ';            Vml.style.left = l + ' px ';        Vml.style.top = t + ' px ';        }; MakeviSible (El.vml.color.shape, (size. L + (el.isimg 0:size.blw)), (size. T + (el.isimg 0:size.btw)), (size. W-1), (size.        H-1), 0); Makevisible (El.vml.image.shape, (size. L + SIZE.BLW), (size. T + size.btw), (size. W), (size.                H), 1);        var bg = {' X ': 0, ' Y ': 0};            var figurepercentage = function (axis, position) {var fraction = true;                    Switch (position) {case ' left ': Case ' top ': bg[axis] = 0;                Break                    Case ' center ': bg[axis] =. 5;                Break                    Case "Right": Case ' bottom ': bg[axis] = 1;                Break                    Default:if (Position.search ('% ')! =-1) {Bg[axis] = parseint (position) *.01;                    } else {fraction = false; }} var Horz = (axis = = ' X '); Bg[axis] = Math.ceil (fraction? (Size[horz? ' W ': ' H '] * Bg[axis])-(Size[horz? ')            W ': ' H '] * Bg[axis])): parseint (position));            if (bg[axis] = = 0) {bg[axis]++;        }        };        for (Var b in BG) {figurepercentage (b, thisstyle[' backgroundposition ' +b]); } el.vml.image.fill.position = (bg. X/size. W) + ', ' + (bg. Y/size.                H);        var BgR = thisstyle.backgroundrepeat; var DC = {' T ': 1, ' R ': size. W+fudge, ' B ': size. H, ' L ': 1+fudge}; /* These is defaults for repeat of any kind */var ALTC = {' X ': {' B1 ': ' L ', ' B2 ': ' R ', ' d ': ' W '}, ' Y ': {' B1 ': ' T '        , ' B2 ': ' B ', ' d ': ' H '}}; if (BgR! = ' repeat ') {var c = {' T ':(bg. Y), ' R ':(bg. X+SIZE.W), ' B ':(bg. y+size.h), ' L ':(bg. X)};  /* These is defaults for no-repeat-clips down to the image location */if (Bgr.search (' repeat-')! =-1) {/* Now let's revert to DC for repeat-x or repeat-y */var v = bgr.splIt (' repeat-') [1].touppercase ();                C[ALTC[V].B1] = 1;            C[ALTC[V].B2] = size[altc[v].d]; } if (C.b > size. H) {c.b = size.            H        } el.vml.image.shape.style.clip = ' rect (' +c.t+ ' px ' + (C.r+fudge) + ' px ' +c.b+ ' px ' + (C.l+fudge) + ' px) ';        } else {el.vml.image.shape.style.clip = ' rect (' +dc.t+ ' px ' +dc.r+ ' px ' +dc.b+ ' px ' +dc.l+ ' px) ';        }}, Fixpng:function (EL) {el.style.behavior = ' none '; if (El.nodename = = ' BODY ' | | el.nodename = = ' TD ' | | el.nodename = = ' TR ') {/* Elements not supported yet */RET        Urn        } el.isimg = false;                if (El.nodename = = ' IMG ') {if (El.src.toLowerCase (). Search (/\.png$/)! =-1) {el.isimg = true;            el.style.visibility = ' hidden ';            } else {return; }} else if (El.currentStyle.backgroundImage.toLowerCase (). Search ('.PNG ') = =-1) {return;        } var lib = PNG;        EL.VML = {color: {}, Image: {}};        var els = {shape: {}, fill: {}};                for (Var r in El.vml) {for (Var e in Els) {var nodestr = lib.ns + ': ' + E;            El.vml[r][e] = document.createelement (NODESTR);            } el.vml[r].shape.stroked = false;            El.vml[r].shape.appendchild (El.vml[r].fill);        El.parentNode.insertBefore (El.vml[r].shape, EL); } El.vml.image.shape.fillcolor = ' none '; /* Don ' t show blank white shapeangle when waiting for image to load. */el.vml.image.fill.type = ' tile '; /* Ze magic!! Makes image show up. */El.vml.color.fill.on = false; /* Actually going to apply VML element ' s style.backgroundcolor, so hide the whiteness.                */Lib.attachhandlers (EL);        Lib.givelayout (EL);                Lib.givelayout (el.offsetparent);   /* Set up element */LIB.APPLYVML (EL); }};try {Document.execcommand ("Backgroundimagecache", false, True);/* Tredosoft multiple IE doesn ' t like this, so try{} It */} catch (R) {}png.createvmlnamespace (); Png.createvmlstylesheet ();//JavaScript Document

IE6 does not support PNG picture resolution