IE6で透過pngを使用可能にする「alphafilter.js」が、ロールオーバーに対応して嬉しい

IE6透過pngを有効にする「alphafilter.js」がロールオーバーにも対応して、凄く便利になっていたので嬉しくて投稿。

配布元及び詳しい使用方法は、かの有名なto-R様
みなさん凄い人ばかりで尻込みしてしまいます・・・。

使い方は本当に簡単。まずはダウンロードした「alphafilter.js」を、例のごとくhead要素内で読み込み。この時、読み込みを高速化させるためdefer属性の記述をする点がポイントみたいです。


あとは透過にしたい画像にclass=”alphafilter”を付加するだけで、IE6でも透過pngの使用が可能になります。


透過機能と併せてロールオーバー機能を使用する場合は、デフォルトの画像が「sample.png」ならロールオーバー後の画像は「sample_on.png」のように拡張子の前に「_on」を付加した画像を作ってデフォルト画像と同階層にアップ。

あとは画像にclass=”alphafilter btn”を付加するだけ。


透過機能はpngのみの対応らしいですが、ロールオーバー機能はすべてのブラウザ、jpg、gif、png形式の画像で使用可能とのこと。

ボタン関係のjavascriptは、これ一つで事足りそうです。

僕たちのコーディングは、こうした素晴らしい方々の存在があってこそ成り立っているということを忘れてはいけませんね。

改めてお礼申し上げます。

このページのトップへ

この記事へのトラックバックURL

コメントを投稿する

*印は必須項目です

*
*(入力しても露出はされないのでご心配なく)
このページのトップへ