馬老師的網事部落-巨匠電腦版

PNG去背與IE相容性問題

在馬老師教Dreamweaver課程的時候，會稍微講解一下有關網頁可以置放的圖檔格式

總共有以下三種，當然也會簡單提這三種圖檔的格式特色：

JPEG：可容16,777,216（全彩）顏色的圖檔格式，可惜無法儲存去背格式的圖檔

GIF：最多只能存256色，可以儲存去背的格式

PNG：一樣為全彩的格式圖檔，也可以儲存去背格式的圖檔

所以綜合上述觀念，其實網頁中最優異的圖檔格式應該是PNG格式

但是現在在網頁上面使用PNG格式的圖檔就會有一些瀏覽器支援上的問題

詳細的情形請看下面的解釋吧～

在Dreamweaver中我們放入一個PNG去背圖（下圖左）與一個GIF去背圖（下圖右）

很明顯可以看出來GIF因為圖檔色彩數...等限制，其實去背的品質不太好

這樣的網頁若我們在瀏覽器預覽後，可以得到以下的結果：

IE7的瀏覽結果

IE6的預覽結果

我們會發現在IE6的瀏覽器中，似乎不能支援我們使用PNG格式的圖檔

但我們若是在同樣的網頁中，加入以下的語法後

在IE6的瀏覽器中，就可以正確無誤的看到去背後的PNG圖檔囉～

這樣一來我們就可以在網頁中放心使用去背品質較好的PNG囉～

改善IE6與PNG去背圖支援的語法：

<script language="javascript">
function correctPNG() {
 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
  }
 }
}
if (document.all) {
 window.attachEvent("onload", correctPNG);
}
</script>