「smoothRollOver.js」について
前回、CSS、jsを使用したロールオーバーについて紹介しましたが、
今回はロールオーバーをカッコ良くするライブラリを紹介します。
ロールオーバーすると滑らかに画像が切り替わるライブラリ
透過PNGに対応したクロスフェードボタン「smoothRollOver.js」
これを利用すると、画像をロールオーバしたときにふんわりなめらかにon・off画像が切り替わってくれるんです。
しかも設定も簡単！
［使い方］
まずはjQueryとsmoothRollOver.jsとDD_belatedPNG(IE用)を用意します。
画像は「画像名_on.png」「画像名_off.png」という名前で２パターン用意します。
ファイル名：●●_on.png
ファイル名：●●_off.png
そして、HTMLの<head>内でjQueryとsmoothRollOver.jsとDD_belatedPNG(IE用)を読み込みます。
そして、画像を表示させたい部分に
=html= <a href="#" title="ボタン"><img src="画像名_off.png" alt="ボタン" width="●●" height="●" /></a>
と記述するだけ！！
offの画像を記述しただけですが、jsでonの画像に切り替えてくれるんです。
簡単で、きれいなロールオーバーができるなんて、とってもいいですよね。
デモページ
そんな「smoothRollOver.js」、こちらでもらえます。
→http://www.jeia.co.jp/report/2010/07/01/8/
ちなみに、注意点もあるようです。
・ロールオーバー以外の透過pngが使えない。
単体で使うなら使いたい部分のclassを設定できるDD_belatedPNG(IE用)。
しかし、smoothRollOver.jsと併用し、classを設定してしまうと、ロールオーバー部分に二重に透過が適用されうまくいかないようです・・。
詳しくは→http://www.b4child.com/?p=195
