よくボタンを実装する際に、マウスカーソルが重なったら明るく変化とか、画像を切り替える場面があるかと思います。今回は画像を2個用意しておいてJavascriptを使って切り替える方法を試してみたいと思います。といっても、html内で処理できちゃうぐらいのモノなので、コピペで手軽に使えるはずです。
サンプルはストアのボタン
アプリケーションといえば、今やスマホのアプリというイメージでしょうか。App StoreやGoogle Playといった表記はあっちこっちで見かけます。ということで、今回はストアのボタンをサンプルにしてみたいと思います。それぞれ、通常時とマウスオーバー時の2パターンの画像を用意します。
- App Store
- Google Play
htmlで画像を表示させる
ボタンなのでaタグでimg画像を囲っておきます。全体をdivで囲うのは、のちにスタイルとかを書くのに便利だろうというだけで、特に意味はないので省いても問題ないでしょう。また、画像のsrc部分は画像置き場に合わせて適宜変更してくださいね。
<div>
<a href="" title="App Store"><img src="btn_appstore.png" alt="app store"></a>
<a href="" title="Google play"><img src="btn_googleplay.png" alt="google play"></a>
</div>
これで準備はOK。
onmouseoverイベントを使う
いよいよ本番。マウスカーソルが乗ったときに画像を切り替えるようにするには、onmouseoverイベントを使用します。これはマウスカーソルが乗った時にこのイベントが実行されるというイメージです。実際にコードで書いてみると
<div>
<a href="" title="App Store"><img src="btn_appstore.png" alt="app store" onmouseover="this.src='btn_appstore_over.png'"></a>
<a href="" title="Google play"><img src="btn_googleplay.png" alt="google play" onmouseover="this.src='btn_googleplay_over.png'"></a>
</div>
こんな感じになります。「マウスカーソルが乗ったら、this.srcつまり、このimgのsrcを次の内容に書き換えなさい」という感じになっていると思ってください。つまり、ここではoverのpngに切り替えているわけですね。これを実行してみると
↓マウスが乗ったら
こんな感じに切り替わってくれます。ただし、今のままだと切り替わったまま元に戻ってくれないので、ずっと明るくなったままの表示になってしまいます。次はこれを修正していきましょう。
カーソルが外れたらonmouseoutイベント
マウスカーソルが外れた場合の処理にはonmouseoutイベントを使用します。さきほどのonmouseoverと同様の書き方でOK。さきほどのhtmlに追加してみましょう。
<div>
<a href="" title="App Store"><img src="btn_appstore.png" alt="app store" onmouseover="this.src='btn_appstore_over.png'" onmouseout="this.src='btn_appstore.png'"></a>
<a href="" title="Google play"><img src="btn_googleplay.png" alt="google play" onmouseover="this.src='btn_googleplay_over.png'" onmouseout="this.src='btn_googleplay.png'"></a>
</div>
「マウスカーソルが外れたら、scrを次の内容に書き換える」というイメージですね。ここでは元のscrに戻してあげることで、ボタンからカーソルが外れたら元の表示に戻るような処理にしています。実際に見てみると
↓マウスが乗ったら
↓マウスが外れたら
無事元に戻るようになりましたね！
まとめ
今回はonmouseのイベントを使っての画像切り替えでした。手軽に実装できるので非常に便利ですが、画像が重い場合には読み込み等で時間がかかる場合があるので注意してください。ボタン程度なら問題なく使えると思いますよ。最後にコードを載せておきますので、画像部分を用意して試してみてくださいね！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS</title>
</head>
<body>
<div>
<a href="" title="App Store"><img src="btn_appstore.png" alt="app store" onmouseover="this.src='btn_appstore_over.png'" onmouseout="this.src='btn_appstore.png'"></a>
<a href="" title="Google play"><img src="btn_googleplay.png" alt="google play" onmouseover="this.src='btn_googleplay_over.png'" onmouseout="this.src='btn_googleplay.png'"></a>
</div>
</body>
</html>