TOP
>
JavaScript
>
alphafilter.jsが透過pngのロールオーバーに対応
IE6用の透過pngライブラリ「alphafilter.js」が透過pngのロールオーバーに対応しました。
透過機能はIE6で画像の拡張子がpngの場合のみですが、ロールオーバーはすべてのブラウザ、jpg、gif、png形式の画像で利用いただけます。
img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。
<img src="./sample.png" class="btn" alt="" />
sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。
透過機能と合わせて利用する場合は、以下のように指定します。
<img src="./sample.png" class="alphafilter btn" alt="" />
シンプルなライブラリでいようと心がけていたのですが、透過png+ロールオーバーは個人的に非常にニーズの高い機能なので実装してみました。
関連エントリー
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
footerをウィンドウ下部に固定する『footerFixed.js』
ブロックレベル要素の高さを揃えるheightLine.js
ページ内リンクをスマートにするsmoothScroll.js
一番簡単な画像置換の方法-imageReplace.js-