各種不同的瀏覽器對於網頁程式開發者來說 ,是一種很苦惱的事情 ,尤其遇到瀏覽器版本更新卻不支援某些舊的語法時 ,便會讓人感到很火大 ,就在開發公司的網站專案時 ,遇到PNG格式的透明圖無法正常顯示的狀況 ,一直以來我都是新版IE的支持者 ,所以一但新版IE發佈了 ,我一定立即就更新 .

這一天 ,在製作公司新版網頁的資料庫程式時 ,同事反映它的畫面不正常 ,仔細查看才發現 PNG透明圖的問題 ,雖然最簡單的是直接改用GIF格式的圖檔做透明圖 ,但是 GIF格式的圖檔解析度就低了 ,畫面就不會好看 ,不會好看老闆就不滿意 ,老闆不滿意,我就完蛋了...

透明圖無法正常運作的範例 ,在IE6才會

PNG透明圖 

所以哩 ... 還是要用PNG圖檔來做透明圖 ,畢竟很多產品圖要放上網站 ,這個問題是要解決的 ... 廢話這麼多 .. 好啦 ! 解決方式透過GOOGLE搜尋可以找到數百個不同的說法 ,但其實很簡單 ...

首先 ,把下面這段程式碼, 抄回去 ,存成 .js 檔案, 或者 ,插入網頁的 head 段落 .

=== 解決 PNG 透明圖的 javascript 程式碼 開頭 ===

<script language="Javascript">

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

function fixPNG()
{
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
      }
   }
}
}

</script>

=== 解決 PNG 透明圖的 javascript 程式碼 結束 ===

然後 ,修改網頁的 <body> 段落 ,將 onload="fixPNG();" 插入你的 <body> 存檔,
再重新整理網站頁面 ,就會發現 ,問題已經解決了 ...

PNG透明圖2 

以上為簡單的解決方式 ,供大家參考 ,希望對大家有些許幫助 ,謝謝.

 


創作者介紹

經驗交流分享與備忘

Frank 發表在 痞客邦 PIXNET 留言(0) 人氣()