JavaScriptでオンマウスで処理を実行する方法

Webページは単なる静的なコンテンツ以上のものです。JavaScriptを使えば、ユーザーとのインタラクティブなやり取りを実現できます。今回は、特にマウスイベントに焦点を当て、ページ上でマウスの動作に応じて様々な処理を実行する方法を解説します。

マウスイベントとは？
主なマウスイベント一覧
イベントリスナーの設定方法
例要素の色を変更する
実例マウスの動きに応じた情報の表示
サンプルコードマウスオーバーで拡大する画像ギャラリー
まとめインタラクティブなUIの実現

マウスイベントとは？

マウスイベントは、マウスの動きやクリックに応じて発生するイベントのことを指します。これには、例えばマウスポインタが要素の上に乗ったときや、マウスがクリックされたときなど、様々な場面があります。

主なマウスイベント一覧

mouseover: マウスポインタが要素の上に移動した時に発生
mousemove: マウスポインタが要素の上で移動する間、連続して発生
mouseout: マウスポインタが要素から離れた時に発生
mouseenter: マウスポインタが要素に入った時に一度だけ発生
mouseleave: マウスポインタが要素から完全に離れた時に一度だけ発生

イベントリスナーの設定方法

イベントリスナーは、特定のイベントが発生したときに実行される関数を設定する仕組みです。以下のように、addEventListenerメソッドを使用して設定します。

element.addEventListener('event_name', function() {
    // ここに実行したい処理を書く
});

例要素の色を変更する

例として、マウスがあるdiv要素の上に乗ったときにその要素の背景色を変更するシンプルな例を考えます。

const box = document.getElementById('box');
box.addEventListener('mouseover', function() {
    box.style.backgroundColor = 'blue';
});

このコードでは、idが’box’の要素がマウスオーバーされたときに、その要素の背景色を青に変更しています。

実例マウスの動きに応じた情報の表示

ユーザーがマウスを動かすと、その座標に応じて情報を表示する例を紹介します。以下のコードでは、マウスが要素上で動いたときに、その座標を表示します。

const box = document.getElementById('box');
box.addEventListener('mousemove', function(event) {
    const x = event.clientX;
    const y = event.clientY;
    box.innerHTML = `マウスの位置: (${x}, ${y})`;
});

サンプルコードマウスオーバーで拡大する画像ギャラリー

必要なHTMLの準備

まず、画像ギャラリーのサムネイルと、大きな画像を表示する領域をHTMLで作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery Example</title>
    <style>
        #gallery {
            display: flex;
        }
        .thumbnail {
            width: 100px;
            height: 100px;
            margin: 10px;
            cursor: pointer;
        }
        #mainImage {
            width: 400px;
            height: 400px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div id="gallery">
        <img src="image1_small.jpg" alt="Image 1" class="thumbnail">
        <img src="image2_small.jpg" alt="Image 2" class="thumbnail">
        <img src="image3_small.jpg" alt="Image 3" class="thumbnail">
    </div>
    
    <img id="mainImage" src="placeholder.jpg" alt="Selected Image">
    
    <script src="script.js"></script>
</body>
</html>

ここで、#galleryは画像ギャラリー全体のコンテナ、.thumbnailはサムネイル画像、#mainImageは選択された画像を大きく表示する領域です。

JavaScriptでのイベントハンドリング

次に、サムネイルの画像にマウスを乗せたときに、#mainImageで表示される大きな画像を変更するJavaScriptを書きます。

// サムネイル画像の要素を全て取得
const thumbnails = document.querySelectorAll('.thumbnail');

// メイン画像の要素を取得
const mainImage = document.getElementById('mainImage');

// 各サムネイルにイベントリスナーを設定
thumbnails.forEach(function(thumbnail) {
    thumbnail.addEventListener('mouseover', function() {
        // サムネイルの画像のsrcを取得
        const newImageSrc = thumbnail.src.replace('_small', '');
        
        // メイン画像のsrcを更新
        mainImage.src = newImageSrc;
        
        // メイン画像のaltを更新
        mainImage.alt = thumbnail.alt;
    });
});

このJavaScriptのコードは、ページにある全ての.thumbnailクラスの画像に対してmouseoverイベントリスナーを設定します。ユーザーがサムネイル画像にマウスを乗せたとき、#mainImageのsrc属性（およびalt属性）が更新され、対応する大きな画像が表示されるようになります。

実行結果と説明

この画像ギャラリーでは、ユーザーがサムネイルの画像にマウスを乗せると、大きな画像がその画像に切り替わります。これにより、ユーザーはギャラリーの中から興味のある画像を簡単に確認できます。

以上が、シンプルな画像ギャラリー機能の一例です。HTMLでギャラリーのレイアウトを作り、JavaScriptでインタラクティブな機能を実装することで、ユーザーにとって使いやすく、視覚的に魅力的なウェブページを作成することができます。

注意: この例で使用される画像ファイル（image1_small.jpg, image2_small.jpg, image3_small.jpg, placeholder.jpg）は、実際にあるファイルパスに置き換える必要があります。

まとめインタラクティブなUIの実現

JavaScriptのマウスイベントを利用することで、ウェブページにダイナミックなインタラクションを実装することが可能です。例えば、ユーザーがボタンにマウスを乗せたときに情報を表示したり、要素の色を変更するといったインタラクティブな演出を加えることができます。

ユーザーの体験を向上させるために、これらのイベントを効果的に利用して、視覚的に魅力的でインタラクティブなウェブページを作成しましょう。