JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.addEventListener()のマウスオーバーで画像の切り替え

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.addEventListener()

JavaScriptの.addEventListener()のマウスオーバーで画像の切り替え

JavaScriptの.addEventListener()のマウスオーバーで画像の切り替え

この記事では、マウスオーバーで画像の切り替えを、JavaScriptの .addEventListener() メソッドで実装します。

かかかず
かかかず

しかし、.addEventListener() メソッドはほんと便利すね。

サンプルもあるので、最後までご覧いただけると嬉しいです。

.addEventListener()のmouseenterとmouseleave

.addEventListener()mouseenter イベントは、マウスが対象の要素の上に乗ったときに発生するイベントです。そして、 mouseleave イベントは、マウスが対象の要素から離れたときに発生するイベントです。

changeimg.addEventListener( 'mouseenter', () => {
        // マウスオーバーした時の処理内容
} );
changeimg.addEventListener( 'mouseleave', () => {
        // マウスが離れた時の処理内容
} );

マウスオーバーした時に、似たようなイベントで mouseover があります。

今回の記事では、親・子要素の概念がないので気にしなくていいですが、mouseover はバブリングするので、この記事では mouseenter を使っています。

バブリングとは?

バブリングとは、子要素のイベント発生を契機として親要素のイベントも働くことです。

マウスオーバーで画像を切り替えするサンプル

早速サンプルです。

以下の画像にマウスポインタを当てると画像が切り替わり、マウスポインタを画像から離すと元の画像に戻ります。

サンプル画像
かかかず
かかかず

画像の簡単な切り替えをします。

実装の手順と方法

手順と方法

各コードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

はじめに、設置したい場所にHTMLのコードを記述します。

<img id="img1" src="https://dubdesign.net/wp-content/uploads/2022/02/java_apitab.jpg" alt="サンプル画像">
JavaScriptを記述

次に、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 タグを取得します。

取得したら、.addEventListenermouseenter の中には切り替えする画像のパスを記述して、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";
    } );

さいごに

画像の切り替え程度にも関わらずコード量は多いですが、コードの詳細が分からなくても雰囲気でわかりやすい内容だと思います。

是非参考にしてみてください。