IE6 does not support PNG image resolution

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.