この記事では、マウスオーバーで画像の切り替えを、JavaScriptの .addEventListener() メソッドで実装します。
しかし、.addEventListener() メソッドはほんと便利すね。
サンプルもあるので、最後までご覧いただけると嬉しいです。
目次
.addEventListener()のmouseenterとmouseleave
.addEventListener() の mouseenter イベントは、マウスが対象の要素の上に乗ったときに発生するイベントです。そして、 mouseleave イベントは、マウスが対象の要素から離れたときに発生するイベントです。
changeimg.addEventListener( 'mouseenter', () => {
// マウスオーバーした時の処理内容
} );
changeimg.addEventListener( 'mouseleave', () => {
// マウスが離れた時の処理内容
} );マウスオーバーした時に、似たようなイベントで mouseover があります。
今回の記事では、親・子要素の概念がないので気にしなくていいですが、mouseover はバブリングするので、この記事では mouseenter を使っています。
バブリングとは、子要素のイベント発生を契機として親要素のイベントも働くことです。
マウスオーバーで画像を切り替えするサンプル
早速サンプルです。
以下の画像にマウスポインタを当てると画像が切り替わり、マウスポインタを画像から離すと元の画像に戻ります。
画像の簡単な切り替えをします。
実装の手順と方法
各コードの解説の前に、実装の手順と方法について簡単にご説明します。
はじめに、設置したい場所にHTMLのコードを記述します。
<img id="img1" src="https://dubdesign.net/wp-content/uploads/2022/02/java_apitab.jpg" alt="サンプル画像">次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
const changeimg = document.getElementById("img1");
changeimg.addEventListener( 'mouseenter', () => {
changeimg.src = "https://dubdesign.net/wp-content/uploads/2022/02/java_numberchange.jpg";
} );
changeimg.addEventListener( 'mouseleave', () => {
changeimg.src = "https://dubdesign.net/wp-content/uploads/2022/02/java_apitab.jpg";
} );CSSのコードはないので、これで完成です。
ざっくりとしたコードの解説
コードは、HTML・JavaScriptの2種類です。順に解説していきます。
HTML
HTMLは、img タグのみです。
<img id="img1" src="https://dubdesign.net/wp-content/uploads/2022/02/java_apitab.jpg" alt="サンプル画像">「src」には、マウスオーバーで切り替えする前のパスを記述するようにして、切り替え後の画像パスは後述のJavaScriptのコードに記述します。
JavaScript
JavaScriptは、はじめに切り替えをする img タグを取得します。
取得したら、.addEventListener の mouseenter の中には切り替えする画像のパスを記述して、mouseleave には元に戻す時の画像のパスを記述します。
const changeimg = document.getElementById("img1");
changeimg.addEventListener( 'mouseenter', () => {
changeimg.src = "https://dubdesign.net/wp-content/uploads/2022/02/java_numberchange.jpg";
} );
changeimg.addEventListener( 'mouseleave', () => {
changeimg.src = "https://dubdesign.net/wp-content/uploads/2022/02/java_apitab.jpg";
} );さいごに
画像の切り替え程度にも関わらずコード量は多いですが、コードの詳細が分からなくても雰囲気でわかりやすい内容だと思います。
是非参考にしてみてください。
