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