[jQuery]ロールオーバー


画像を使ったロールオーバーはグローバルナビやお問い合わせのボタンなどWEBサイトの様々なところで使用されることが多いものです。

できれば、cssで背景の変更などではなく、jQueryで一括で定義できるようにすれば、楽ですし、後々の管理が楽になります。

以下が、jQueryを使ったロールオーバーの記述です。

用意する画像は末尾に_offと_onを記述したロールオーバー前と後の画像を用意します。
1,gNavi_01_off.jpg
2,gNavi_01_on.jpg

jQueryで画像をホバーしたときに、画像のソースを変更してonとoffの切り替えを行っています。

ソース上のでは、jsの記述とaタグにクラス「rollover_btn」を付与するだけで、実装できるのでcssよりも便利なのではないでしょうか。