各種不同的瀏覽器對於網頁程式開發者來說 ,是一種很苦惱的事情 ,尤其遇到瀏覽器版本更新卻不支援某些舊的語法時 ,便會讓人感到很火大 ,就在開發公司的網站專案時 ,遇到PNG格式的透明圖無法正常顯示的狀況 ,一直以來我都是新版IE的支持者 ,所以一但新版IE發佈了 ,我一定立即就更新 .
這一天 ,在製作公司新版網頁的資料庫程式時 ,同事反映它的畫面不正常 ,仔細查看才發現 PNG透明圖的問題 ,雖然最簡單的是直接改用GIF格式的圖檔做透明圖 ,但是 GIF格式的圖檔解析度就低了 ,畫面就不會好看 ,不會好看老闆就不滿意 ,老闆不滿意,我就完蛋了...
透明圖無法正常運作的範例 ,在ＩＥ６才會
所以哩 ... 還是要用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> 存檔,
再重新整理網站頁面 ,就會發現 ,問題已經解決了 ...
以上為簡單的解決方式 ,供大家參考 ,希望對大家有些許幫助 ,謝謝.
留言列表
Banana-Pi, 樹梅派應用 
