初心者向け。マウスオーバー時の画像の切り替えをjQueryでやる方法
1055 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はjQueryを使ったマウスオーバー時の画像の切り替えのやり方の解説をします。
デモは↓です。
マウスオーバーする前は画像が薄いですがマウスオーバーすると画像の色が黒くなります。
これは薄い色の画像と濃い色の画像を用意して画像の切り替えで実現しています。
完成形のコードは↓になります。
画像ですがファイル名を「hover_off.png（マウスオーバーする前の画像）とhover_on.png（マウスオーバーした後の画像）」にしています。
ではコードについて解説をします。
目次
ファイル名を部分的に変える場合
画像に対する設定
30行目ですが4つの画像に対して処理を行うので「.each」があります。
31行目の「$(this).attr(‘src’)」はマウスオーバーした画像のsrc属性を取得するためです。
32行目の「$(this).attr(‘src’).replace(‘off’,’on’)」は画像にマウスオーバーした時にマウスオーバーする前の画像の拡張子（hover_off.pngとhover_on.png）の「off」を「on」に変える記述です。
マウスオーバーした時の処理
33行目から35行目はマウスオーバーした時の画像に対する処理です。
34行目はマウスオーバーした画像の拡張子の「off」を「on」にしています。
マウスオーバーを外した時の処理
37行目はマウスオーバーした画像の拡張子の「on」を「off」にしています。
これで完成です。
ファイル名を丸ごと変える場合
私は画像の拡張子を「hover_on」と「hover_off」にしてファイルの一部の切り替え（offとonの切り替え）をしていますがファイル名を丸ごと変えることもできます。
32行目の「off」を画像をマウスオーバーする前のファイル名にして32行目の「on」を画像をマウスオーバーした後のファイル名にすればできます。
拡張子が同じ場合
ファイル名が「hogehoge.png」（マウスオーバーする前）から「hugahuga.png」（マウスオーバーした後）にする（拡張子名の前まで変える）場合は32行目の「off」を「hogehoge」にして32行目の「on」を「hugahuga」にすればいいです。
拡張子も変える場合
ファイル名が「hogehoge.png」（マウスオーバーする前）から「hugahuga.jpg」（マウスオーバーした後）にする（ファイル名自体を変える）場合は32行目の「off」を「hogehoge.png」にして32行目の「on」を「hugahuga.jpg」にすればいいです。