IE6 PNG image background opaque solution using JS to achieve _javascript skills

Source: Internet
Author: User
Tags visibility hasownproperty
We often use the PNG picture, in the IE6 under the background of the opaque problem, below to introduce you next JS solution.
First we need to use a JS, the code is as follows:
Copy Code code as follows:

/**
* Dd_belatedpng:adds IE6 support:png images for CSS background-image and HTML .
* Author:drew Diller
* email:drew.diller@gmail.com
* url:http://www.dillerdesign.com/experiment/dd_belatedpng/
* version:0.0.8a
* Licensed under the MIT license:http://dillerdesign.com/experiment/dd_belatedpng/#license
*
* Example Usage:
* Dd_belatedpng.fix ('. Png_bg '); argument is a CSS selector
* Dd_belatedpng.fixpng (Somenode); argument is an htmldomelement
**/
/*
Please READ:
Absolutely everything in the script is SILLY. I know this. IE ' s rendering of certain pixels doesn ' t make sense, so neither does this code!
*/
/** Rewrite by Waitingbar 2012.1.12
Unable to fully display the problem when the transparent PNG picture is reduced under IE6
El.vml.image.fill.type = ' tile '; To
El.vml.image.fill.type = ' frame ';
*/

var dd_belatedpng = {
NS: ' Dd_belatedpng ',
Imgsize: {},
Delay:10,
nodesfixed:0,
Createvmlnamespace:function () {/* Enable VML */
if (document.namespaces &&!document.namespaces[this.ns]) {
Document.namespaces.add (THIS.NS, ' urn:schemas-microsoft-com:vml ');
}
},
Createvmlstylesheet:function () {/* style VML, enable behaviors * *
/*
Just in case lots of the other developers have added
Lots of other stylesheets using Document.createstylesheet
And hit the 31-limit mark, let's not use that method!
Further reading:http://msdn.microsoft.com/en-us/library/ms531194 (vs.85). aspx
*/
var screenstylesheet, Printstylesheet;
Screenstylesheet = document.createelement (' style ');
Screenstylesheet.setattribute (' media ', ' screen ');
Document.documentElement.firstChild.insertBefore (Screenstylesheet, Document.documentElement.firstChild.firstChild);
if (Screenstylesheet.stylesheet) {
Screenstylesheet = Screenstylesheet.stylesheet;
Screenstylesheet.addrule (This.ns + ' \:* ', ' {behavior:url (#default #vml)} ');
Screenstylesheet.addrule (this.ns + ' \\:shape ', ' position:absolute; ');
Screenstylesheet.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.screenstylesheet = Screenstylesheet;
/* Add a Print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */
/* R 閙 I PR about us OST for automating this! */
Printstylesheet = document.createelement (' style ');
Printstylesheet.setattribute (' media ', ' print ');
Document.documentElement.firstChild.insertBefore (Printstylesheet, Document.documentElement.firstChild.firstChild);
Printstylesheet = Printstylesheet.stylesheet;
Printstylesheet.addrule (This.ns + ' \:* ', ' {display:none!important;} ');
Printstylesheet.addrule (' img. ' + this.ns + ' _sizefinder ', ' {display:none!important;} ');
}
},
Readpropertychange:function () {
Var el, display, V;
el = event.srcelement;
if (!el.vmlinitiated) {
Return
}
if (Event.propertyName.search (' background ')!=-1 | | event.propertyName.search (' border ')!=-1) {
DD_BELATEDPNG.APPLYVML (EL);
}
if (Event.propertyname = = ' Style.display ') {
display = (El.currentStyle.display = = ' None ')? ' None ': ' Block ';
For (v. in EL.VML) {
if (El.vml.hasOwnProperty (v)) {
El.vml[v].shape.style.display = display;
}
}
}
if (Event.propertyName.search (' filter ')!=-1) {
Dd_belatedpng.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 * *
DD_BELATEDPNG.APPLYVML (EL);
}, 1);
},
/**
* This is the ' method ' to a document.
* @param {String} selector-required-a CSS selector, such as ' #doc. Container '
**/
Fix:function (selector) {
if (This.screenstylesheet) {
var selectors, I;
selectors = Selector.split (', '); /* Multiple selectors supported, no need for multiple calls to this anymore * *
For (i=0 i<selectors.length; i++) {
This.screenStyleSheet.addRule (Selectors[i], ' Behavior:expression (dd_belatedpng.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, handlers, handler, Moreforas, A, H;
self = this;
Handlers = {resize: ' vmloffsets ', move: ' Vmloffsets '};
if (El.nodename = = ' A ') {
Moreforas = {mouseleave: ' Handlepseudohover ', MouseEnter: ' Handlepseudohover ', Focus: ' Handlepseudohover ', Blur: ' Handlepseudohover '};
For (A in Moreforas) {
if (Moreforas.hasownproperty (a)) {
Handlers[a] = Moreforas[a];
}
}
}
For (h in handlers) {
if (Handlers.hasownproperty (h)) {
Handler = function () {
Self[handlers[h]] (EL);
};
El.attachevent (' on ' + H, handler);
}
}
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, S;
Styles = {' BorderStyle ': true, ' borderwidth ': true, ' bordercolor ': true};
For (s in styles) {
if (Styles.hasownproperty (s)) {
El.vml.color.shape.style[s] = El.currentstyle[s];
}
}
},
Vmlfill:function (EL) {
if (!el.currentstyle) {
Return
} else {
var Elstyle, Noimg, lib, V, IMG, imgloaded;
Elstyle = El.currentstyle;
}
For (v. in EL.VML) {
if (El.vml.hasOwnProperty (v)) {
El.vml[v].shape.style.zindex = Elstyle.zindex;
}
}
El.runtimeStyle.backgroundColor = ';
El.runtimeStyle.backgroundImage = ';
Noimg = true;
if (elstyle.backgroundimage!= ' None ' | | | el.isimg) {
if (!el.isimg) {
EL.VMLBG = Elstyle.backgroundimage;
EL.VMLBG = El.vmlBg.substr (5, El.vmlBg.lastIndexOf (') ')-5);
}
else {
EL.VMLBG = EL.SRC;
}
Lib = this;
if (!LIB.IMGSIZE[EL.VMLBG]) {/* Determine size of loaded image */
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; margin:0; padding:0; '; /* Make sure to set behavior to none to prevent accidental matching of the helper elements! */
imgloaded = function () {
This.width = This.offsetwidth; /* Weird cache-busting requirement! */
This.height = This.offsetheight;
Lib.vmloffsets (EL);
};
Img.attachevent (' onload ', imgloaded);
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 the offsetleft and the ClientLeft add up to 1, and the VML ends up getting fuzzy ... so We have to push/enlarge things through 1 pixel and then clip off the excess * *
Vmloffsets:function (EL) {
var thisstyle, size, fudge, makevisible, BG, BgR, DC, ALTC, B, C, V;
Thisstyle = El.currentstyle;
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};
Fudge = (size. L + SIZE.BLW = 1)? 1:0;
* VML shape, left, top, width, height, origin * *
makevisible = function (VML, L, T, W, H, O) {
Vml.coordsize = 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);
BG = {' X ': 0, ' Y ': 0};
if (el.isimg) {
Bg. X = parseint (Thisstyle.paddingleft, 10) + 1;
Bg. Y = parseint (Thisstyle.paddingtop, 10) + 1;
}
else {
for (b in BG) {
if (Bg.hasownproperty (b)) {
This.figurepercentage (BG, size, B, thisstyle[' backgroundposition ' +b]);
}
}
}
El.vml.image.fill.position = (bg. X/size. W) + ', ' + (bg. Y/size. H);
BgR = Thisstyle.backgroundrepeat;
DC = {' T ': 1, ' R ': size. W+fudge, ' B ': size. H, ' L ': 1+fudge}; /* These are defaults for repeat of the any kind *
ALTC = {' X ': {' B1 ': ' L ', ' B2 ': ' R ', ' d ': ' W '}, ' Y ': {' B1 ': ' T ', ' B2 ': ' B ', ' d ': ' H '}};
if (BgR!= ' repeat ' | | | el.isimg) {
c = {' T ':(bg. Y), ' R ':(bg. X+SIZE.W), ' B ':(bg. y+size.h), ' L ':(bg. X)}; /* These are 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 * *
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 ');
}
},
Figurepercentage:function (BG, size, axis, position) {
var horizontal, fraction;
fraction = true;
Horizontal = (Axis = = ' X ');
Switch (position) {
Case ' left ':
Case ' top ':
Bg[axis] = 0;
Break
Case ' center ':
Bg[axis] = 0.5;
Break
Case ' right ':
Case ' Bottom ':
Bg[axis] = 1;
Break
Default
if (position.search ('% ')!=-1) {
Bg[axis] = parseint (position, 10)/100;
}
else {
fraction = false;
}
}
Bg[axis] = Math.ceil (fraction?) (Size[horizontal? ' W ': ' H '] bg[axis]-(size[horizontal?) W ': ' H '] (* Bg[axis])): parseint (position, 10));
If (Bg[axis]% 2 = 0) {
bg[axis]++;
}
return Bg[axis];
},
Fixpng:function (EL) {
El.style.behavior = ' None ';
Var lib, Els, Nodestr, V, E;
if (el.nodename = = ' Body ' | | el.nodename = = ' TD ' | | | el.nodename = = ' TR ') {/* Elements not supported yet * *
Return
}
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
}
lib = dd_belatedpng;
EL.VML = {color: {}, Image: {}};
Els = {shape: {}, fill: {}};
For (v. in EL.VML) {
if (El.vml.hasOwnProperty (v)) {
For (e in Els) {
if (Els.hasownproperty (e)) {
Nodestr = Lib.ns + ': ' + E;
El.vml[v][e] = document.createelement (NODESTR);
}
}
el.vml[v].shape.stroked = false;
El.vml[v].shape.appendchild (El.vml[v].fill);
El.parentNode.insertBefore (El.vml[v].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 '; /* makes image show up. */
El.vml.image.fill.type = ' frame '; * 2012.1.12 * *
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);
El.vmlinitiated = true;
LIB.APPLYVML (EL); /* render! */
}
};
try {
Document.execcommand ("Backgroundimagecache", false, true); /* Tredosoft multiple IE doesn ' t like this, so try{} it * *
catch (r) {}
Dd_belatedpng.createvmlnamespace ();
Dd_belatedpng.createvmlstylesheet ();

Now let's see how to use this JS
Dd_belatedpng is a perfect solution IE6 under the PNG transparent JS plug-in, Dd_belatedpng used the Microsoft VML language to redraw the PNG image to achieve translucent effect, and can support Background-position and Background-repeat properties, support Pseudo class. Dd_belatedpng is the best solution for the many IE6 PNG transparency issues, others have a lot of negative effects.

How to use
Copy Code code as follows:

<!--[if IE 6]><script src= "Dd_belatedpng.js" ></script><script> dd_belatedpng.fix ('. Png_bg ') ); </script><! [endif]-->

The reference function is Dd_belatedpng.fix (), and the * in parentheses indicates all CSS selectors. PNG_BG to your CSS selector name.

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.