福岡のホームページ制作・SEO対策のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : JavaScript

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

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

hover_change_btn_off hover_change_btn_on

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

ではHTMLを書きます。

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

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

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

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

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

福岡市の中小企業様向けのホームページ制作を得意としております。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。