PNG-24 transparency

因為我的美術同事，一直說他想用png-24的圖片，因為他說這樣效果會比較好，
而且邊也會比較滑順，但我一直因為png-24如果設定透明背景，在IE6會出現灰色背景的這個問題，就一直叫他用png-8就好了。而且重點是，首頁大家都在閒慢了，如果為了解決這個問題，又要載入其他的檔案，就覺的很討厭，另外還有另一個原因就是我很懶，哈哈。

其實要解決的話，就是用下次這串語法就可以了。但在Firefox反而會有問題！圖
會變成blank.gif這張…

主要就是filter這段語法。
如果是單一張圖很方便，但如果要做onmouserover 跟 onmouseout 時，
可以動態換圖又變的很麻煩。

所以後來又找了另一個方法，但他要載入另一個檔，就覺的很機車。
不過…因為比較簡單，所以我還是用了他，哈~~

首先到 http://www.twinhelix.com/css/iepngfix/
去下載 iepngfix.zip ，接著解壓後，將iepngfix.htc和blank.gif放到你想要放的地方。

接著在CSS裡，加上

img.xxxx {
  behavior: url(iepngfix.htc);
}

因為我不想要全部都套，所以只設定某個className的時候套用。

ps.
　　要注意iepngfix.htc的路徑，另外如果你的blank.gif想放在不同的地方。

　　那你要編輯iepngfix.htc，去更改blank.gif的路徑。

 

 

update:2008-10-06 回應美術同"好"的問題，簡單的變換圖片。但JS你要再自己改一下，這是我先亂寫的。

HTML：

Javascript：

function do_change(obj, act){
  switch (act) {
    case 'over':
      obj.src='xxx1.png';
      break;
    case 'out':
      obj.src='xxx2.png';
      break;
  };
}