ホームページ制作・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の書き換えを行うことで画像を切り替えています。

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

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

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

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

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

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