银河国际棋牌网站-威尼斯彩票-首页

png图片IE6下透明的方法

发布者:云商网络 来源:/ 发布时间:2012-2-23 22:59:11 浏览量:

 

用过2个方法都能解决。

一个是对于html中img标签的,IE6不支撑PNG半透明图片的缺陷为web设计带来了极大的不便,但有一种网上比较流行的方法可以改变这个状况,下面详细先容这种方法:
把以下代码保存为correctpng.js

----------------------------------/correctpng.js --------------------------------
function correctPNG()
{
   for(var i=0; i   {
   var img = document.images[i]
   var imgName = img.src.toUpperCase()
   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
   {
   var imgID = (img.id) ? "id=" + img.id + " " : ""
   var imgClass = (img.className) ? "class=" + img.className + " " : ""
   var imgTitle = (img.title) ? "title=" + img.title + " " : "title=" + img.alt + " "
   var imgStyle = "display:inline-block;" + img.style.cssText
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
   var strNewHTML = "   + "filter:progid:DXImageTransform.微软.AlphaImageLoader"
   + "(src=\" + img.src + "\, sizingMethod=scale);\">
"
   img.outerHTML = strNewHTML
   i = i-1
   };
   };
};

if(navigator.userAgent.indexOf("MSIE")>-1)
{
window.attachEvent("onload", correctPNG);
};

----------------------------------correctpng.js --------------------------------

在网页的头部引用一下


使用的时候直接用img标签即可。

 


$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

 


另外一种是对于css嵌入background图的:

 

 

-----------------------------ie_png.js--------------------------------------------
var ie_png = {

 ns: ie_png,
 imgSize: {},
 
 createVmlNameSpace: function() { /* enable VML */
  if (document.namespaces && !document.namespaces[this.ns]) {
    document.namespaces.add(this.ns, urn:schemas-microsoft-com:vml);
  }
  if (window.attachEvent) {
   window.attachEvent(onbeforeunload, function() {
    ie_png = null;
   });
  }
 },
 
 createVmlStyleSheet: function() { /* style VML, enable behaviors */
  /*
   Just in case lots of other developers have added
   lots of other stylesheets using document.createStyleSheet
   and hit the 31-limit mark, lets not use that method!
   further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
  */
  var style = document.createElement(style);
  document.documentElement.firstChild.insertBefore(style, document.documentElement.firstChild.firstChild);
  var styleSheet = style.styleSheet;
  styleSheet.addRule(this.ns + \\:*, {behavior:url(/Article54/)});
  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 OBrien, http://www.thanatopsic.org/hendrik/ */
  this.styleSheet = styleSheet;
 },
 
 readPropertyChange: function() {
  var el = event.srcElement;
  if (event.propertyName.search(background) != -1 || event.propertyName.search(border) != -1) {
   ie_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) {
   ie_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() { /* wouldnt work as intended without setTimeout */
   ie_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   this.styleSheet.addRule(selectors[i], behavior:expression(ie_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, 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]) { /* 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 cant figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have 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.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);
  
  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 are 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 are defaults for no-repeat - clips down to the image location */
   if (bgR.search(repeat-) != -1) { /* now lets 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 */
   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;
  }
  var lib = ie_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; /* Dont 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 elements 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 doesnt like this, so try{} it */
} catch(r) {}
ie_png.createVmlNameSpace();
ie_png.createVmlStyleSheet();
-----------------------------ie_png.js--------------------------------------------


相关资讯:安平png图片IE6下透明的方法
冀州区png图片IE6下透明的方法
深州png图片IE6下透明的方法
枣强png图片IE6下透明的方法
武邑png图片IE6下透明的方法
武强png图片IE6下透明的方法
饶阳png图片IE6下透明的方法
景县png图片IE6下透明的方法
故城png图片IE6下透明的方法
阜城png图片IE6下透明的方法
大家可为您提供如下网络服务: 营销型网站建设 商标注册 百度爱采购 竞价帐户托管 阿里淘宝装修 seo网站优化 支付接口对接 站群系统 程序开发 网站维护
(转载请注明转自:http:www.baisoubao.cn 网站建设 谢谢!)
上一篇:谈如何减少进入百度的观察期和GOOGLE沙盒的概率
下一篇:JavaScript实现网页图片等比例自动缩放函数 DrawImage

银河国际棋牌网站|威尼斯彩票

XML 地图 | Sitemap 地图