處理 IE6 不能顯示 PNG 透明背景的問題 (及 Google Sites 問題)

不知道為什麼，今天的網站突然開不出來，每次開到底下狀態列顯示［完成］，畫面就突然消失了，變成一片空白。即使進入 Blogger 的網頁元素，狀況也一樣，網頁元素全部看不見。

後來嘗試著把一些元件(Widget)，圖片及Javascript連結一樣一樣測試去除，最後才發現，原來是之前放在 Google Site 的 Javascript 檔案的問題，移除之後一切就正常能開啟了。(真是，忙了一個上午)

其實 Google Sites 並不允許直接放置 Javascript 檔案(.js)上去，我是將副檔名改成 .txt 放上去的，然後在網站程式碼裡，宣告為 Javascript 呼叫引用。

知道問題之後，只好嘗試著直接將 Javascript 程式碼寫在 Head 區域裡。

我想原因可能是：Google Sites 不再允許你把放上去的檔案，當作 Javascript 呼叫了。

以下為一段處理 PNG 檔案的 Javascript，目的是為了解決在IE6無法顯示 .png 的透明背景。之前的文章 在 MenuBar 上的圖片處理問題 有做介紹。

程式碼如下：(此段程式碼放在 </Head> 前面，紅色字必須記得加上去)

<SCRIPT type='text/javascript'>
//<![CDATA[
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

function fixPNG(myImage)
{
　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
　}
}
//]]>
</SCRIPT>

使用時，在 <img 標籤裡面加上 onload="fixPNG(this)" 即可。