SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

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

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

change image when mouse over

答え

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

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

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

状態 ファイル名
通常(非mouseover) *-off.拡張子 の形の名前をつける apple-off.png
マウスが乗ったとき(mouseover) *-on.拡張子 の形の名前をつける apple-on.png

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

apple-off apple-off apple-off apple-off apple-off apple-off apple-off apple-off apple-off apple-off


備考

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

関連するメモ

コメント