【JavaScript】マウスが乗ったら画像を差し替える
問題
マウスオーバーで画像を切り替えたい。
1つや2つでなくて、たくさんある！
答え
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
備考
*-off.*, *-on.* だと、意図しないファイル名も該当しそうな場合は、on/off以外の語句を使ったり、対象となる画像を img[src*="-off."] で探すのではなく、クラスを使ったり、正確な正規表現で画像のURLを切り替えるようにするとよい。