*将以下代码保存为png.js*/
function correctPNG(){
for(var i=0; i
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.cssTextif (img.align == "left") imgStyle = "float:left;" +
imgStyle
if (img.align == "right") imgStyle = "float:right;" +
imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" +
imgStylevar strNewHTML = "
imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height +
"px;" + imgStyle + ";"
+
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\',
sizingMethod='scale');\">
"img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
在body下
< script type="text/java script "
src="inc/png.js"> script
>
如果在网页中直接插入png图片想使其透明只需加入以下js代码，整个页面内的所有直接插入的png图片都可以实现透明：
< script language="Java script
">
function correctPNG() // correctly handle PNG transparency in Win
IE 5.5 & 6.
{
var
arVersion = navigator.appVersion.split("MSIE")
var version
= parseFloat(arVersion[1])
if ((version
>= 5.5) &&
(document.body.filters)){
for(var j=0; j
j++)
{
var img = document.images[j]
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.cssTextif (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 = "
imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height +
"px;" + imgStyle + ";"
+
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\',
sizingMethod='scale');\">
"img.outerHTML = strNewHTML
j = j-1
}
}
}}
window.attachEvent("onload", correctPNG);
script >
--------------------------------------------------------------------
如果是想使用png做背景透明的话，需要用到css滤镜和hack：
html>body .png { background:url(1.png);
width:300px; height:100px; border:#000 solid 1px;}
* html .png { filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=scale, src='1.png');
background:none; width:300px; height:100px; border:#000 solid
1px;}
============================================
IE6不支持PNG半透明图片的缺陷为web设计带来了极大的不便，之前曾经介绍过用滤镜+hack的方法实现显示PNG，不过实现起来相当繁琐。还有一种网上比较流行的方法，更加简便，下面详细介绍这种方法：
把以下代码保存为correctpng.js
function correctPNG()
{
for(var i=0;
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;" + imgStylevar strNewHTML =
"
+ " style=\"" + "width:" +
img.width + "px; height:" + img.height + "px;" + imgStyle +
";"
+
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\',
sizingMethod='scale');\">
"
img.outerHTML =
strNewHTML
i = i-1
};
};
};
if(navigator.userAgent.indexOf("MSIE")>-1)
{
window.attachEvent("onload", correctPNG);
};
在网页的头部引用一下
< script language=Java script
src="correctpng.js"type=text/java script > script
>
使用的时候直接用img标签即可。
这个最管用
< script language="Java script
">function correctPNG() // correctly handle PNG transparency in Win
IE 5.5 & 6.
{
var
arVersion = navigator.appVersion.split("MSIE")
var version
= parseFloat(arVersion[1])
if ((version
<= 6.0) &&
(document.body.filters)){
for(var j=0; j
j++)
{
var img = document.images[j]
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.cssTextif (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 = "
imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height +
"px;" + imgStyle + ";" + "margin:0;"
+
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src +
"\');\">
"img.outerHTML = strNewHTML
j = j-1
}
}
}}
function alphaBackgrounds(){
var rslt =
navigator.appVersion.match(/MSIE (d+.d+)/, '');
var itsAllGood = (rslt != null
&& Number(rslt[1])
>= 5.5);
