PCサイトで、画像をマウスオーバーしたらマウスオーバー用の画像に変わる…という作りをしているサイトが結構あります。
例えば以下のような感じ。
(PCで下の画像にマウスカーソルをもっていくと画像が変わります)
このように、マウスカーソルを乗せたことで画像が変わるようにするには
・CSSで設定
・jQueryで設定
の2つの方法がありますが、今回はjQueryで画像を切り替える方法について紹介したいと思います！
1. マウスオーバー時とそうでない時の画像をそれぞれ用意する
まず、マウスオーバー時とそうでない時の画像をそれぞれ用意しましょう。
今回はマウスオーバー時は
を、そうでない時は
をそれぞれ用意しました。
なお今回のjQueryを適用させるにあたって、わかりやすいように
マウスオーバー時 → ◯◯-on.png
そうでない時 → ◯◯-off.png
という風にファイル名をつけておきましょう。
※ちなみに今回用意した画像は
・mouse-on.png
・mouse-off.png
というようにファイル名に関しては、両方の画像とも同じ名前をつけておく必要があります！
ちなみに画像の保存形式はjpgでもpngでもgifなどでも大丈夫です。
2. jQueryを設定
続いて画像を切り替えるためのjQueryを設定しましょう。
もしjQueryのライブラリを先に設定している場合は下記のコードを記述します。
<script>
$(function(){
$('切り替えたい画像があるところ').hover(function(){
$(this).attr('src', $(this).attr('src').replace('-off', '-on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('-on', '-off'));
}
});
});
</script>
そして、jQueryのライブラリを読み込んでいない場合は下記のコードを記述します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$('切り替えたい画像があるところ').hover(function(){
$(this).attr('src', $(this).attr('src').replace('-off', '-on'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('-on', '-off'));
}
});
});
</script>
このコードを記述することで、マウスオーバーした時に画像が切り替わるようになります！
$('切り替えたい画像があるところ').hover(function(){
に関しては今回は
$('#single img').hover(function(){
と設定しましたが、ここは任意の場所をご自身で設定しておく必要があります。
解説としては、
$('切り替えたい画像があるところ').hover(function(){
$(this).attr('src', $(this).attr('src').replace('-off', '-on'));
上のコードでマウスオーバー時に◯◯-off.pngという画像を◯◯-on.pngという画像に切り替えるよ、と設定しており、
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('-on', '-off'));
上のコードは、マウスオーバーしていない時にもし◯◯-on.pngという画像があった場合は◯◯-off.pngという画像に切り替えるよ、と設定しています。
この両方を設定しておくことで、マウスオーバー時とそうでない時とで画像を切り替えることが可能になります！
まとめ
マウスオーバー時とそうでない時とで画像を切り替えるのは、視覚的にもわかりやすいので是非とも実装しておいた方がよい機能ではないかな？と思いますので、是非とも実装してみましょう(^-^*)
