跳过导航链接
技术文档
·网站建设
·软件使用
·图形设计
·程序开发
·网络应用
·电脑技巧
 
公司介绍
·全景旅行者说明
·全景旅行者概念海报
·公司简介
·索仕SRCOS网络应用平台
·索仕网站管理系统
·影视广告制作
·联系我们
 
 

IE6.0下显示PNG图片解决方案

2009/9/27 17:40:47

前段时间本站发表过一篇:跨浏览器测试工具、技巧和Css Hac,介绍了一些常用的浏览器工具、解决方案和Hack,对跨浏览器的表现问题做了一些分析。

今天和大家探讨一下IE6.0下显示PNG图片的问题,有人可能会说,现在都用IE8.0或是Firefox,但做为网页设计师来说就得考虑到所有浏览器的兼容性,而且IE6.0的市场占有率还是比较高的。

根据网路调查公司StatCounter最新的浏览器市占率调查结果,到今年7月14日为止,超过5成用户使用IE 6,3成用户使用IE 7,只有不到一成的用户使用Firefox 3.0版,而新版IE 8则有逐渐超越Firefox 3.0的趋势。

下面给大家介绍两种方法

方法1: 将PNG图片转换为flash

1.新建一个flash文件->文件->导入->导入到舞台,然后选择你想要显示在网站中的PNG背景透明图片。状态如下图(本例为了说明PC的背景是透明的,特意为画布增加了背景色)

FLASH中PNG的效果图

FLASH中PNG的效果图(灰色为舞台背景色)

 2.适当的调整图片的位置,之后即可将Flash导出

3.在网页的适当地方用如下代码调用这个Flash

设置Flash背景透明
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="600" height="140" align="middle">
  <param name="movie" value="images/top1.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent"> <!--这里代码可使Flash背景透明 -->
  <embed src="images/top1.swf" width="600" height="140" align="middle" quality="high"pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>

方法2: 使用js解决IE6显示问题

js代码如下:

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
Copyright 2007 Ignia, LLC
Based in part on code from from http://homepage.ntlworld.com/bobosola.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
function fixPng() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version >= 5.5 && version < 7.0) && (document.body.filters)) {
    for(var i=0; i<document.images.length; i++) {
      var img = document.images[i];
      var imgName = img.src.toUpperCase();
      if (imgName.indexOf(".PNG") > 0) {
        var width = img.width;
        var height = img.height;
        var sizingMethod = (img.className.toLowerCase().indexOf("scale") >= 0)? "scale" : "image";
        img.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src.replace('%23', '%2523').replace("'", "%27") + "', sizingMethod='" + sizingMethod + "')";
        img.src = "images/blank.gif";
        img.width = width;
        img.height = height;
        }
      }
    }
  }
fixPng();

网页中调用这个js:

<script defer type="Text/Javascript" src="js/MSIE.PNG.js"></script>

现在你会看到PNG图片已经透明了,但上面一张图片没显示出来

这是因为JS中我们用到了:

        img.src = "images/blank.gif";

只要在图片文件夹下加入这张图就OK了。

来源:逸诚科技
 
 
 
昆明索仕科技开发有限公司 版权所有 Copyright© 2002-2010 Kunming Source Technology Exploitive Co.,LTD. All Rights Reserved.
电话:0871-5627877 业务QQ:163871  滇ICP备05000592号
本站基于:索仕网站信息管理系统建设 版本 2.0.4325