2007年10月11日

Tips:半透過PNG画像をIE6で見れるようにする



半透過PNG画像をアルファチャンネル非対応のIE6で表示すると上図のように表示される。

IE6以下で半透過pngを使うための JS がいろいろ紹介されているが、ここではわたしが一番簡単そうだと感じた下記サイトの記事を参考にした。

http://d.hatena.ne.jp/amachang/20070206/1170715555

・"alphachpng.js"と"alphachpng.gif"の二つの外部ファイルを同じディレクトリに置く。
・半透過にしたい img 要素のあとに "alphachpng.js" を読み込む。
・img には必ず width,height を指定する。

記述例:
<img src="http://****.matrix.jp/cave/img/pushpin/pushpin_steel01.png" width="39" height="56">
<script src="http://****.matrix.jp/cave/alphachpng.js"></script>


これで下図のようにちゃんと半透過された。\(^o^)/

posted by localghost at 10:31| WEB(HTML,CSS,Javascript,DHTMLなど)