【JavaScript】マウスが乗ったら画像を差し替える

Tweet

Category JavaScript 2013/02/12

問題

マウスオーバーで画像を切り替えたい。

1つや2つでなくて、たくさんある！

答え

img要素で表示している画像をマウスオーバーで切り替える例。

スタイルシートで :hover の background したくないときもある。そんなときは、ファイル名に規則をつければ、JavaScriptで簡単に実装できる。

以下のルールでファイル名をつけて画像を用意する。

img要素でmouseover, mouseoutのイベントが発生したときに、src属性が *-off.* の形をしていれば、src属性を *-on.* に書き換えるJavaScriptを書く。

jQueryで書くと、

$(function(){
	$('img[src*="-off."]')
		.on('mouseover', function(){this.src=this.src.replace('-off.','-on.');})
		.on('mouseout', function(){this.src=this.src.replace('-on.','-off.');});
});

demo

備考

*-off.*, *-on.* だと、意図しないファイル名も該当しそうな場合は、on/off以外の語句を使ったり、対象となる画像を img[src*=”-off.”] で探すのではなく、クラスを使ったり、正確な正規表現で画像のURLを切り替えるようにするとよい。