二つの画像をマウスオーバーで切り替える小技


こんばんは、息子です。
以前作成したメニューのボタンですが、なんとなく寂しいなと思い、マウスをボタンに合わせる(マウスオーバーと言ったりします)と文字の色を変えるようにしました。
今回は画像を2枚使って、マウスオーバーで画像を切り替えることで実現しています。
この手法は、ウェブページを作る上では基本的なテクニックで、かなり以前(おそらく10年以上前)から使われています。
今回は、そのテクニックをjQueryというJavaScriptのライブラリで実行しようと思います。
能登島でのご宿泊は民宿 若林荘をぜひご利用下さいませ。
民宿 若林荘
皆さまのお越しを心よりお待ち申し上げます。


まず、jQueryですが本家からダウンロードして使っても良いですが、ウェブ全体でキャッシュの有効利用を考え、Googleが用意しているファイル(http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js)を利用します。
こちらは直接リンクしても良いことになっていますので、なるべく使ったほうが良いと思います。
次に、切り替える画像をそれぞれ用意します。
今回は、白抜きの文字列と同じ大きさで、色つきの文字列を作成しました。
次は、切り替える範囲を決めます
切り替えをしたい画像ファイルを、divタグで囲みます。
今回の場合は、メニューの最初から最後までをdivで囲んでいます。
そして、そのタグには「rollover-images」というidを書いておきます。
これをすることで、スクリプトによる範囲指定が簡単になります。
肝心の切り替えるスクリプトはこちらです。

jQuery(function( $ ){
$('#rollover-images img').hover(function(){
this.src = this.src.replace('.png','_hover.png');
},function(){
this.src = this.src.replace('_hover','');
});
});

こうすると、画像ファイルにマウスが重なったときに画像が変わるようになります。
上記のスクリプトは、「logo_01.png」の画像を「logo_01_hover.png」に切り替えるようなスクリプトになります。