联系站长 加入收藏 设为首页 繁體中文 RSS
  首页 | 生活百科 | 电脑网络 | 高手学堂 | 语录名言 | 读书文学 | 极品软件 | 奇趣图片 | 站长微博  
 您的位置: 精品百字节网 >> 电脑网络 >> 网络编程 >> 编程问题 >> 正文 当前没有通告!
   □  PNG图片在IE6中背景不透明解决方法    4星级
PNG图片在IE6中背景不透明解决方法
[ 作者:作者不详     来源:互连网     点击数:     更新时间:2008-09-26     文章录入:Admin
【字体:
[内容提要]
使用PNG图片最大的问题是,PNG图片不透明,在IE6下无法显示透明区域(Firefox、Opera、Safari均支持PNG透明),会有一种灰白色代替成为其背景色。这不是PNG这个格式图片的问题,而是IE6的BUG,没有将PNG的Alpha通道打开,造成透明PNG图片的在IE6上显示不出透明区域。

在head标签中引入js文件:
<script language="JavaScript" type="text/javascript" src="pngfix.js"></script><script language="JavaScript" src="pngfix.js"></script>

pngfix.js   内容如下:
var PIXELGIF="pngfix.gif";// 这个是个头1*1像素的透明gif图片,请自行建立并放在你网页的相同目录下

var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
var pngxp=/\.png$/i;
var AlphaPNGfix= "progid:DXImageTransform.Microsoft.AlphaImageLoader";
function fixPNGAll() {
        if(!document.all) return;
        if ((version >= 5.5 && version < 7) && (document.body.filters)) {
          for(var i=0; i<document.images.length; i++) {
                var img = document.images[i];
                if(img.src && pngxp.test(img.src)) {
                  var imgName = img.src;
                  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 = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                  + "filter:" +AlphaPNGfix
                  + "(src=’" + img.src + "’, sizingMethod=’scale’);\"></span>";
                  if (img.useMap) {
                        strNewHTML += "<img style=\"position:relative; left:-" + img.width + "px;"
                        + "height:" + img.height + "px;width:" + img.width +"\" "
                        + "src=\"" + PIXELGIF + "\" usemap=\"" + img.useMap 
                        + "\" border=\"" + img.border + "\">";
                  }
                  img.outerHTML = strNewHTML;
                  i--;
                }
          }
          /* for type=image png button */
          var kmax = document.forms.length;
          for(var k=0; k<kmax; k++) {
                var fmob = document.forms[k];
                var elmarr = fmob.getElementsByTagName("input");
                var jmax = elmarr.length;
                for(var j=0; j<jmax; j++) {
                        var elmob = elmarr[j];
                        if(elmob && elmob.type=="image" && pngxp.test(elmob.src)) {
                                var origsrc = elmob.src;
                                elmob.src = PIXELGIF;
                                elmob.style.filter = AlphaPNGfix+"(src=’" +origsrc +"’)";
                        }
                }
          }
        }
}

function fixPNG(img) {
        if(!document.all) return;
        var img;
    if(img && img.src && pngxp.test(img.src)) {
      var imgName = img.src;
      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 = "<span " + imgID + imgClass + imgTitle
      + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
      + "filter:" +AlphaPNGfix
      + "(src=’" + img.src + "’, sizingMethod=’scale’);\"></span>";
      if (img.useMap) {
        strNewHTML += "<img style=\"position:relative; left:-" + img.width + "px;"
        + "height:" + img.height + "px;width:" + img.width +"\" "
        + "src=\"" + PIXELGIF + "\" usemap=\"" + img.useMap 
        + "\" border=\"" + img.border + "\">";
      }
      img.outerHTML = strNewHTML;
    }
}

图片的调用方法:
<img src="Name.png" alt="Name"  onload="fixPNG(this)" />        单个图片的调用

<body  onload="fixPNGAll()" />     所有图片的调用

注意事项:
1.如果你的网页需要符合XHTML 1.0标准的话,单个图片的onload事件是不符合XHTML 1.0标准的,可以用所有图片的调用方法.
2.用PNG为button按钮的背景时,js文件同样有效.

上一篇文章:示例解说函数Instr和InstrRev的区别 下一篇文章:网站整合编码不同导致乱码的解决办法
发表评论 □告诉好友 □打印此文 □收藏此页 □关闭窗口 □返回顶部
 最新热点文章
 精品医院类网站网址大收集
 如何删除windows 2003或xp系统隐藏的...
 DedeCms管理员后台登陆经常自动退出的...
 知道IP如何用dos命令查出电脑名称
 WORD出错老是要求以安全模式打开文件...
 如何设置首页不显示页眉页脚?
 如何利用inurl命令查询网站外链及栏目...
 
 最新推荐文章
 精品医院类网站网址大收集
 如何利用宽带路由器控制局域网内电脑上...
 CSS圆角代码的实现方法
 带停顿的单行文字滚动代码
 实用的新网站免费收录提交地址精选
 Left join , Right Join, Inner Join用...
 趣话淘宝网衍生的多种新型职业
 
 最新图文
  ◇  网友评论:(只显示最新5条。评论内容只代表网友观点,与本站立场无关!)
关于本站 | 免责申明 | 网站地图 | 联系站长 | 友情链接 | 与我同在
冀ICP备06032589号【虚拟化精英群虚拟化精英群续
  Copyright© 2006-2009 100byte.Com All Rights Reserved
网站声明:本网站是公益性质网站,部分内容来源于网络,如有侵犯您权利的地方,请与精品百字节站长联系,尽快修正.
Powered By CreateLive CMS 本站法律顾问:(冀港)武镇海律师
点击这里给我发消息