png透明图片如何在ie中透明显示

你知道传奇吗？

div自动高度设定.di

大 | 中 | 小

[

2007/03/15 09:59 | by Space.As ]

今天在对付png在ie中透明的战斗中,我们使用了js.
看如下代码

今日更新
--------------------------------
用css来定义也可以实现.....
hack下:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='**.png',sizingMethod='crop');

其实下边的js也是应用的
AlphaImageLoader
直接加到css里倒是省去js了,某些人禁用js时候要考虑这个解决方案
--------------------------------------

// JavaScript Document
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
             }
      }
   }
window.attachEvent("onload", correctPNG);

将这个代码保存成js文件以后每次在网页中引用这个文件就可以让你的png图片透明显示了.

不会引用????

注意js的文件名和路径.

========================2008-10-30更新=====================

在使用上边js时候容易出现一个小问题。

这是在我做某个项目中发现的。如果页面中有其他的png文件可能在显示上会出现问题。
比如有用户上传了一个png格式的图片。而这个图片可能会显示不正常。例如无法显示。出现X号等等。

所以更新了一下js脚本。
需要透明时候直接引用针对图片使用。
其实png透明我往往都是用在logo上。
背景等等其他很少用。

function fixPNG(myImage) {
  var arVersion = navigator.appVersion.split("MSIE");
  var version = parseFloat(arVersion[1]);
  if ((version >= 5.5) && (version < 7) && (document.body.filters))
    {
      var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
      var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
      var imgTitle = (myImage.title) ? "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
      var imgStyle = "display:inline-block;" + myImage.style.cssText;
      var strNewHTML = "<span " + imgID + imgClass + imgTitle

       + " style=\"" + "width:" + myImage.width

       + "px; height:" + myImage.height

       + "px;" + imgStyle + ";"

       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

       + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
      myImage.outerHTML = strNewHTML;
    }
}

范例：
<img src="mypng.png" onload="fixpng(this)" />

本站原创 | 评论(1) | 引用(0) | 阅读(2589)

2007/05/19 17:51

偷走了哦`

分页： 1/1