画像をマウスオーバーした時に画像の切り替えをJavaScriptで実装
735 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回は画像をマウスオーバーした時に画像を切り替えるのをJavaScriptで実装します。
簡単に実装できて再現性も高いと思います。
それでは説明します。
実装方法
やることは単純かつコードの量は少ないです。
最初の画像を用意します。
画像をマウスオーバーした時に画像のパスをマウスオーバー時のパスに変えて画像を変えます。
このままだとマウスを画像から離してもマウスオーバーした時の画像のままなのでマウスを画像から離した時は画像のパスを最初に表示していた画像のパスに変えて画像を戻します。
デモ
デモはここから見ることができます。
コード
コードを↓にします。
今回の内容はサイトを作る際に使用するのを想定していますがサイトを作る時に必ずreset.cssを使うのでreset.cssを入れていますが私と同じ内容ではなくてもいいので必ず入れてください。
108行目の「window.addEventListener(‘DOMContentLoaded’」はHTMLの読み込み後という意味ですがHTMLを読み込み後に画像をマウスオーバーして画像を切り替えるので「window.addEventListener(‘DOMContentLoaded’ , () => { }」の{ }中に画像を切り替える処理を入れています。
「()=>{ }」の部分はアロー関数ですがこれを使わなくても問題ないです。
110行目で13行目の画像のセレクタを取得していて13行目のセレクタを「picture」と置いています。
画像をマウスオーバーした時の処理は114行目〜117行目でマウスオーバーした時は「picture.onmouseover」で画像の切り替えは115行目です。
画像を切り替えるのにpictureのsrc属性を変えればいいので「picture.src=”images/img2.jpeg”（picture.src=”切り替える画像のパス”）」となっています。
「picture.src」が画像のパスになります。
ちなみにこのコードを書いている時のフォルダ構成は↓です。
これでマウスオーバーすると画像が切り替わりますが一度画像が切り替わってマウスオーバーを外しても画像はマウスオーバーした時のままです。
マウスオーバーを外した時は元の画像に戻らないといけないのでマウスオーバーを外した時の処理をしますが119行目〜122行目です。
119行目の「picture.onmouseout」が画像をマウスから外した時で120行目で最初の画像に切り替えています。
112行目・116行目・121行目は画像の下にある文字の切り替えのためのコードですが今回の目的は画像の切り替えなので説明を省きます。
これで完成です。