【JavaScript】ホバーで切り替わる画像

2024年12月2日

この記事では、JavaScriptでマウスホバー又はスマホの画面タップで画像が切り替わるプログラミングコードを解説します。

完成形

まずは完成形を見ていきます。

メインの画像とサブの画像が３枚あります。

サブの画像をマウスでホバー又はスマホの画面をタップすると写真が切り替わります。

See the Pen js-08 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

最初にHTMLのコーディングをしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <div class="main-container">
    <img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="main">
  </div>
  <div class="sub-container">
    <img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="sub">
    <img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image2.jpg" class="sub">
    <img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image3.jpg" class="sub">
  </div>
</div>
<script src="main.js"></script>
</body>
</html>

<div class="container">
ページ全体のコンテナを表します。このコンテナ内にメインコンテンツとサブコンテンツが配置されます。
<div class="main-container">
メインコンテンツのコンテナです。このコンテナ内にメイン画像が配置されます。
<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="main">
メインコンテンツ内に表示されるメイン画像を表します。main クラスが指定されているため、CSSスタイルを適用する際に使用される可能性があります。
<div class="sub-container">
サブコンテンツのコンテナです。このコンテナ内に複数のサブ画像が配置されます。
<img src="https://aqua-programdiary.com/wp-content/uploads/2023/08/image1.jpg" class="sub">
サブコンテンツ内に表示される1つ目のサブ画像を表します。sub クラスが指定されているため、CSSスタイルを適用する際に使用される可能性があります。
同様に、2番目と3番目のサブ画像も <img> タグで表現されています。
<script src="main.js"></script>:
main.js というJavaScriptファイルが読み込まれるスクリプト要素です。このファイルに記述されたJavaScriptコードが実行されます。

CSSコーディング

次にCSSでスタイルを設定していきます。

@charset "utf-8";

img {
  max-width: 100%;
}

.container {
  width: 500px;
  margin: 0 auto;
}
/* 500px以下の場合のスタイル */
@media screen and (max-width: 500px) {
  .container {
    width: 100%;
  }
}

.main-container {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 5px;
}

.sub-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}

img { max-width: 100%; }
このスタイルは、すべての<img> 要素の幅を最大100%に設定して、画像が親要素に収まるようにしています。
.container
.container クラスを持つ要素のスタイルです。このクラスはページ全体のコンテナを表します。幅は500pxで、margin プロパティを使って水平方向に自動的に中央に配置されます。
@media screen and (max-width: 500px) { ... }
このメディアクエリは、画面の幅が500px以下の場合に適用されるスタイルです。.container の幅を100%に変更し、コンテナを画面幅に合わせてフル幅に表示します。
.main-container
.main-container クラスを持つ要素のスタイルです。このクラスはメインコンテンツのコンテナを表します。display: grid を使用して、コンテンツをグリッドとして配置しています。grid-template-columns: 1fr; は、1つの列を作成し、その幅をフラクションで指定しています。margin-bottom: 5px; は下部に5pxのマージンを追加します。
.sub-container
.sub-container クラスを持つ要素のスタイルです。このクラスはサブコンテンツのコンテナを表します。display: grid を使用して、コンテンツをグリッドとして配置しています。grid-template-columns: 1fr 1fr 1fr; は、3つの列を作成し、それぞれの幅を均等に分割しています。gap: 5px; はコンテンツ間の間隔を5pxに設定しています。

JavaScriptコーディング

最後にJavaScriptをコーディングして完成です。

const images=document.querySelectorAll('.sub');
const main=document.querySelector('.main');
for(let image of images){
    image.addEventListener('mouseover',function(){
    main.src=image.src;
    });
}

const images = document.querySelectorAll('.sub');
.sub クラスを持つすべての要素を取得し、images という変数に格納します。これはサブ画像要素のリストです。
const main = document.querySelector('.main');
.main クラスを持つ要素（メイン画像要素）を取得し、main という変数に格納します。
for (let image of images) { ... }
images リスト内の各サブ画像要素に対して繰り返し処理を行います。
image.addEventListener('mouseover', function() { ... });
各サブ画像要素にマウスオーバーイベントが発生したときの処理を設定します。
main.src = image.src;
メイン画像の src 属性をサブ画像の src 属性に変更することで、メイン画像がサブ画像に切り替わります。つまり、サブ画像にマウスが乗ると、その画像がメイン画像として表示されるようになります。