画像をマウスオーバーしたときに画像が切り替わるギミックをjQueryで作ってみます。特にグローバルナビゲーションで使うことが多いやつです。
まずは通常時の画像とホバー時の画像を用意します。
画像名には “xxxx_off.png” 、 “xxxx_on.png” というように、「同じ画像名+オンオフが分かる接尾辞」といった名前をつけるようにしましょう。
ではHTMLを書きます。
1 | <a href="" class="mouseover"><img src="images/btn_off.png" alt=""></a> |
imgをaタグで囲んだ、よくあるコードですね。
ではjQueryのコードを書いていきます。jQuery自体の読み込みは忘れないように。
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $('.mouseover').each(function(){ var src_off = $(this).find('img').attr('src'); var src_on = src_off.replace('_off','_on'); $('<img />').attr('src',src_on); $(this).hover(function(){ $(this).find('img').attr('src',src_on); },function(){ $(this).find('img').attr('src',src_off); }); }); }); |
画像をホバーしたときにimgに設定しているパスの_offと_onの書き換えを行うことで画像を切り替えています。
実際の動きはデモをどうぞ。
ちょっとした演出に便利ですね。それではまた！
福岡市の中小企業様向けのホームページ制作を得意としております。
