ie6でpng画像を透過で表示するjavascript

Google Technorati Buzzurl Digg Bloglines DRECOM niftyクリップ pookmark pingking Choix

IE6でアルファ画像(透過png)が正確に表示されません。
かといってgifの透過にすると境界線にエッジが出て汚い。
そんな時にめちゃくちゃ役立つスクリプです。


設定はhead要素内にprototype.jsalphafilter.jsで読み込む。
<script type="text/javascript" src="./prototype.js"> <script type="text/javascript" src="./alphafilter.js">

透過にしたい画像にclass属性でalphafilterと入れるだけで、IE6でも透過画像の使用が可能になります。
<img src="./sample.png" class="alphafilter" alt="" />


背景に透過pngを使ってる場合は背景に設定しているブロックレベル要素のclass属性でalphafilterを入れる。
<p class="alphafilter">内容</p>


※スタンドアローン版IE6では、DirectXのからみでアルファ画像は使用できません。