jQueryでマウスオーバー時にナビゲーション画像の切り替えを行う方法

画像をマウスオーバーしたときに画像が切り替わるギミックをjQueryで作ってみます。特にグローバルナビゲーションで使うことが多いやつです。

まずは通常時の画像とホバー時の画像を用意します。

hover_change_btn_off hover_change_btn_on

画像名には “xxxx_off.png” 、 “xxxx_on.png” というように、「同じ画像名+オンオフが分かる接尾辞」といった名前をつけるようにしましょう。

ではHTMLを書きます。

imgをaタグで囲んだ、よくあるコードですね。

ではjQueryのコードを書いていきます。jQuery自体の読み込みは忘れないように。

画像をホバーしたときにimgに設定しているパスの_offと_onの書き換えを行うことで画像を切り替えています。

実際の動きはデモをどうぞ。

ちょっとした演出に便利ですね。それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »