当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript解决IE6和FF的PNG图片兼容性问题

Javascript
javascript 新浪背投广告实现代码
javascript 选择文件夹对话框(web)
JS 自动完成 AutoComplete(Ajax 查询)
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
jQuery 插件开发 其实很简单
最简单的jQuery程序 入门者学习
javascript 读取xml,写入xml 实现代码
JQuery 实现的页面滚动时浮动窗口控件
javascript 动态加载 css 方法总结
javascript 表格左右收缩
jqurey 学习笔记 传智博客佟老师附详细注释
javascript dom 操作详解 js加强
JS 动态添加列表框项效果代码
Javascript 事件流和事件绑定
Google Map Api和GOOGLE Search Api整合实现代码
9个javascript语法高亮插件 推荐
Prototype String对象 学习
javascript ImgBox透明遮罩层背景图片展示
javascript FAQ函数(提问+回复)
jQuery TextBox自动完成条

Javascript解决IE6和FF的PNG图片兼容性问题


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-13   浏览: 301 ::
收藏到网摘: n/a

  PNG格式的图片文件对浏览器兼容不是很友好,但是这种透明PNG文件还可以做虚边效果,在设计中开始用的越来越多了。特别是IE6,bug多、支持差,但是没有办法用户数量也非常多,首先还是要考虑对它的支持。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);
}