PNG 档案已经愈来越普遍,FireFox 从 1.0 版就已经支持具有 alpha 透明图片,其他 Safari 、Opera 也支持,而目前微软的 IE7,IE8 才有支持,但微软却不对旧版的 IE5.5 与 6 版进行更新支持。(具体表现就是本来透明的 PNG 图片在 IE5.5 与 6 版中看上去非透明)
如果你想在论坛中也希望能够让使用旧版 IE 的使用者,能够看到 PNG 图文件具有 alpha 透明图片。
特别声明此 JS 发布网站为 http://homepage.ntlworld.com/bobosola/index.htm 关于更多细节可以去参考 (英文版)
1. 将下列 JS 语法拷贝
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 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);
2. 用 UltraEdit 或纯文本文件开新文件贴入,并另存新档案为 pngfix.js
备注:上述原文内容中这段 version >= 5.5,根据我的测试,版本大于等于 5.5,其实这样写不妥,因为包含以上 7-8 版本都会被牵连,我发现它会影响到类似这种 function MM_swapImgRestore() 图片特效造成失效,因此我建议改为 version <= 6,小于等于 6 版本,就搞定!
3. 再将 pngfix.js 档案放入你的 phpbb 根目录内
4. 打开你所使用的风格目录夹中的 overall_header.html 文件,寻找以下代码:
</head>
在如上代码之前加入如下代码:
<script language="JavaScript" type="text/javascript" src="pngfix.js"></script>
完成,存档。
PS:此外挂不影响有支持 PNG 的浏览器,仅针对 IE5.5 与 6。
参考链接:
- [外掛] 論壇在 IE6 能支援 PNG 的透明圖片方式:http://phpbb-tw.net/phpbb/viewtopic.php?f=104&t=51449
- png 在 IE6 下的解决办法:http://blog.csdn.net/newflypig/archive/2008/12/10/3492895.aspx
看完了,不错