13 lines
6.9 KiB
JavaScript
13 lines
6.9 KiB
JavaScript
|
/**
|
||
|
|
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
|
||
|
|
* Author: Drew Diller
|
||
|
|
* Email: drew.diller@gmail.com
|
||
|
|
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
|
||
|
|
* Version: 0.0.7a
|
||
|
|
* 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
|
||
|
|
**/
|
||
|
|
var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}if(window.attachEvent){window.attachEvent("onbeforeunload",function(){DD_belatedPNG=null})}},createVmlStyleSheet:function(){var style=document.createElement("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;");this.styleSheet=styleSheet},readPropertyChange:function(){var el=event.srcElement;if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.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){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;el.vml.image.fill.opacity=trans}},handlePseudoHover:function(el){setTimeout(function(){DD_belatedPNG.applyVML(el)},1)},fix:function(selector){var selectors=selector.split(",");for(var i=0;i<selectors.length;i++){this.styleSheet.addRule(selectors[i],"behavior:expression(DD_belatedPNG.fixPng(this))")}},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",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(var a in moreForAs){handlers[a]=moreForAs[a]}}for(var h in 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.backgroundImage;el.vmlBg=el.vmlBg.substr(5,el.vmlBg.lastIndexOf('")')-5)}else{el.vmlBg=el.src}var lib=this;if(!lib.imgSize[el.vmlBg]){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;";img.attachEvent("onload",function(){this.width=this.offsetWidth;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"},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;var makeVisible=funct
|