首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>编程相关>JAVASCRIPT>javascript解决PNG格式的图片文件对浏览器的兼容性
javascript解决PNG格式的图片文件对浏览器的兼容性
来源: 发布时间:2008-09-09 发布人: 浏览: 人次   字体: [ ]  

    大家都清楚,PNG格式的图片文件对浏览器的兼容性不是很友好,但是这种透明PNG文件还可以做虚边效果,在设计中开始用的越来越多了。特别是IE6,bug多、支持差,但是没有办法,目前IE6用户数量也非常多,首先还是要考虑对它的支持。FF对PNG格式的图片支持很好,IE7也改进支持PNG。
  网上流传一个简单的办法来解决IE6和FF的PNG兼容性问题,一段js代码就可以搞定。代码如下,建议把这段代码存为一个独立的js文件,方便页面调用。

function correctPNG()
   {
   for(var i=0; i<document.images.length; 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 = "<span " + imgID + imgClass + imgTitle
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
   //alert(mypng);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
            document.all[i].style.backgroundImage = "url('')";
   //alert(document.all[i].style.filter);
         }                                              
      }
   }
}

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}


相 关 文 章   发布商链接
·实例讲解javascript验证日期格式的代...
·javascript如何给span标签赋值?
·几个在程序开发中经常用到的javascri...
·javascript实现定时刷新页面的代码共...
·javascript实现WEB页面导出为EXCEL或...
·Javascript实现的随机点名代码,附有...
·当form表单提交的是name而不是id时报...
·如何在静态页面中利用javascript读取...
·javascript实现页面跳转的五种方法大...
·javascript对个数不定的复选框进行验...
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·javscript实现鼠标移到小图片
·如何在静态页面中利用javascr...
·javascript实现WEB页面导出为...
·如何在兼容IE和Firefox的情况
·javascript读取本地excel文档
·javascript实现页面自动刷新...
·javascript解决iframe框架页...
·javascript实现网易邮箱多附...
·javascript实现模仿IE自动完...
·javacript实现关闭子窗口,刷...
·javascript脚本实现右键弹出...
·javascript结合Ajax制作的可...
·javascript实现页面载入等待...
·javascript实现一个IP只弹窗...
·javascript导航条比较实用的...
热 门 文 章
·Ext2.0框架的Grid使用介绍祥...
·JS实现多行的HTML静态表格分...
·javascript实现多张图片轮流...
·javascript使用xml数据岛的简...
·Adobe Reader利用javascript...
·javascript读写TEXT文本文件...
·幻灯片焦点图片新闻显示调用f...
·实例讲解Ext Js生成动态树,...
·javascript实现页面载入等待...
·javascript实现动态多附件上...
·Javascript在IE和FireFox中的...
·javascript解析身份证号码得...
·javascript脚本实现右键弹出...
·javascript实现的网页软键盘...
·js操作innerHTML 引起的未知...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .