※このページではアフィリエイト広告を利用しています

【JavaScript】ブログ記事内でボタンを配置してクリック動作で画像を切り替える方法-まとめ-

Web Design
2023.04.17

特定の記事内においてボタンをクリックしたら画像を切り替えたいと思い、実際に行ってみた結果になります。

WordPressでどのように表現したら良いか分からない方はとりあえず、ここで紹介しているコードをコピペして使用してみて下さい。

この記事の対象

  • 記事内で画像を切り替える方法を知りたい方
  • JavaScriptで画像を切り替えを行いたい方
  • コピペで簡単に直ぐに使用したい方
スポンサーリンク
スポンサーリンク

行ったこと

First Image Second Image

ボタンをクリックして画像を切り替える機能を挿入してみました。以下はボタンクリックで画像を変更する方法になります。

挿入したい場所でHTMLを入力

記事内の挿入したい箇所で「カスタムHTML」として以下を挿入します。

<!-- HTML -->
<div style="position: relative;">
  <img id="mainImage" src="test1.png" alt="First Image">
<button id="toggleButton" style="position: absolute; bottom: 10px; left: 10px;">画像を切り替える</button>

  <img id="altImage" src="test2.png" alt="Second Image" style="margin-top: 20px;">
</div>
<!-- CSS -->
<style>
  #mainImage {
    max-width: 100%;
  }

  #altImage {
    display: none;
  }

  #toggleButton {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
</style>
<!-- JavaScript -->
<script>
  var mainImage = document.getElementById('mainImage');
  var altImage = document.getElementById('altImage');
  var toggleButton = document.getElementById('toggleButton');

  toggleButton.addEventListener('click', function() {
    if (mainImage.style.display !== 'none') {
      mainImage.style.display = 'none';
      altImage.style.display = 'block';
    } else {
      mainImage.style.display = 'block';
      altImage.style.display = 'none';
    }
  });
</script>

詳細は以下になります。適宜参考にして下さい。

<!-- HTML -->
<div style="position: relative;">
  <img id="mainImage" src="test1.png" alt="First Image">
<button id="toggleButton" style="position: absolute; bottom: 10px; left: 10px;">画像を切り替える</button>

  <img id="altImage" src="test2.png" alt="Second Image" style="margin-top: 20px;">
</div>

HTMLの中で、最初の画像は 「mainImage」 というIDで 「<img> 」要素として定義しています。次に、2番目の画像は 「altImage」 というIDで別の 「<img> 」要素として定義しています。また、ボタンは 「toggleButton」 というIDで 「<button>」 要素として定義しています。

<!-- CSS -->
<style>
  #mainImage {
    max-width: 100%;
  }

  #altImage {
    display: none;
  }

  #toggleButton {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
</style>

CSSは、最初の画像はページ内で最大の幅に合わせて表示されるように 「max-width: 100%;」 というスタイルを指定しています。

次に2番目の画像は 「display: none;」 というスタイルを指定しているため、初期状態では表示していないです。

ボタンにはいくつかのスタイルを指定して、背景色が青で、文字色が白く、カーソルがポインターにしています。

<!-- JavaScript -->
<script>
  var mainImage = document.getElementById('mainImage');
  var altImage = document.getElementById('altImage');
  var toggleButton = document.getElementById('toggleButton');

  toggleButton.addEventListener('click', function() {
    if (mainImage.style.display !== 'none') {
      mainImage.style.display = 'none';
      altImage.style.display = 'block';
    } else {
      mainImage.style.display = 'block';
      altImage.style.display = 'none';
    }
  });
</script>

JavaScriptは、最初に mainImage、altImage、および toggleButton の各要素を取得しています。

そして、ボタンがクリックされたときに実行されるイベントリスナーを追加しています。イベントリスナーは、最初の画像が現在表示されているかどうかを確認し、表示されている場合は、最初の画像を非表示にし、代わりに2番目の画像を表示しています。逆に、2番目の画像が表示されている場合は、2番目の画像を非表示にし、最初の画像を表示しています。

スイッチ風

First Image Second Image

スイッチの形状にして、選択状態であるかどうかが視覚的に示してみました。

プログラム

<!-- HTML -->
<div style="position: relative;">
  <img id="mainImage2" src="test1.png" alt="First Image">
  <label class="switch" for="toggleButton2">
    <input type="checkbox" id="toggleButton2">
    <span class="slider"></span>
  </label>
  <img id="altImage2" src="test2.png" alt="Second Image" style="margin-top: 20px;">
</div>
<!-- CSS -->
<style>
  #mainImage2 {
    max-width: 100%;
  }

  #altImage2 {
    display: none;
  }

  .switch {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
</style>
<!-- JavaScript -->
<script>
  var mainImage2 = document.getElementById('mainImage2');
  var altImage2 = document.getElementById('altImage2');
  var toggleButton2 = document.getElementById('toggleButton2');

  toggleButton2.addEventListener('change', function() {
    if (toggleButton2.checked) {
      mainImage2.style.display = 'none';
      altImage2.style.display = 'block';
    } else {
      mainImage2.style.display = 'block';
      altImage2.style.display = 'none';
    }
  });
</script>

プログラムの解説は以下になります。

<!-- HTML -->
<div style="position: relative;">
  <img id="mainImage2" src="test1.png" alt="First Image">
  <label class="switch" for="toggleButton2">
    <input type="checkbox" id="toggleButton2">
    <span class="slider"></span>
  </label>
  <img id="altImage2" src="test2.png" alt="Second Image" style="margin-top: 20px;">
</div>

HTMLの部分では、要素で括って、それぞれIDで「mainImage2」と「altImage2」に設定しています。要素を使用して、スライダースイッチを実装し、スイッチの状態を取得しています。

<!-- CSS -->
<style>
  #mainImage2 {
    max-width: 100%;
  }

  #altImage2 {
    display: none;
  }

  .switch {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }

  input:checked + .slider {
    background-color: #2196F3;
  }

  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
</style>

CSSの部分では、スライダースイッチを作成するためのスタイルを定義しています。

スイッチ全体を表す「.switch」クラス、スイッチのトグルボタンを表す「.slider」クラス、そしてスライダースイッチがONになったときの見た目を定義する「.slider:before」クラスを記述しています。

<!-- JavaScript -->
<script>
  var mainImage2 = document.getElementById('mainImage2');
  var altImage2 = document.getElementById('altImage2');
  var toggleButton2 = document.getElementById('toggleButton2');

  toggleButton2.addEventListener('change', function() {
    if (toggleButton2.checked) {
      mainImage2.style.display = 'none';
      altImage2.style.display = 'block';
    } else {
      mainImage2.style.display = 'block';
      altImage2.style.display = 'none';
    }
  });
</script>

JavaScriptの部分では、「mainImage2」「altImage2」および「toggleButton2」の3つの要素を定義し、スライダースイッチの状態が変更されたときに発生するchangeイベントに対してリスナーを設定しています。

スライダースイッチがONになった場合は、mainImage2が非表示になり、代わりにaltImage2を表示しています。スライダースイッチがOFFになった場合は、altImage2が非表示になり、代わりにmainImage2を表示しています。

切り替える度に数値をカウントして出力

First Image

切り替える度に画像の右下側にカウントを出力してみました。自分が何回クリックしているか視覚化すると面白いかなと思い、紹介になります。

プログラム

<!-- HTML -->
<div style="position: relative;">
  <img id="mainImage3" src="test1.png" alt="First Image">
  <button id="toggleButton3" style="position: absolute; bottom: 10px; left: 10px;">画像を切り替える</button>
  <img id="altImage3" src="test2.png" alt="Second Image" style="margin-top: 20px; display: none;">
  <p id="count" style="position: absolute; bottom: 10px; right: 10px; font-size: 16px;"></p>
</div>
<!-- CSS -->
<style>
  #mainImage3 {
    max-width: 100%;
  }

  #toggleButton3 {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
</style>
<!-- JavaScript -->
<script>
  var mainImage3 = document.getElementById('mainImage3');
  var altImage3 = document.getElementById('altImage3');
  var toggleButton3 = document.getElementById('toggleButton3');
  var count = 0;

  toggleButton3.addEventListener('click', function() {
    if (mainImage3.style.display !== 'none') {
      mainImage3.style.display = 'none';
      altImage3.style.display = 'block';
    } else {
      mainImage3.style.display = 'block';
      altImage3.style.display = 'none';
    }
    count++;
    document.getElementById('count').innerHTML = count;
  });
</script>

HTMLとCSSの部分はほとんど変更がないので割愛します。

以下はJavaScriptの解説になります。

<!-- JavaScript -->
<script>
  var mainImage3 = document.getElementById('mainImage3');
  var altImage3 = document.getElementById('altImage3');
  var toggleButton3 = document.getElementById('toggleButton3');
  var count = 0;

  toggleButton3.addEventListener('click', function() {
    if (mainImage3.style.display !== 'none') {
      mainImage3.style.display = 'none';
      altImage3.style.display = 'block';
    } else {
      mainImage3.style.display = 'block';
      altImage3.style.display = 'none';
    }
    count++;
    document.getElementById('count').innerHTML = count;
  });
</script>

今回追加した内容は、カウントをインクリメントして、「innerHTML」プロパティを使用して、「<p>」要素のテキストを更新するというものです。

ボタンをアイコンにする

First Image Second Image

上記のように矢印アイコンにしてみました。

プログラム

<!-- HTML -->
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
    integrity="sha384-qzF71FYJJzZUn29n7W2mJbpxHrVRSaMId9XFXgfyuKNkKjN7OZb5lwPz7g2NL2aT"
    crossorigin="anonymous">
</head>
<div style="position: relative;">
  <img id="mainImage4" src="test1.png" alt="First Image">
  <button id="toggleButton4" style="position: absolute; bottom: 10px; left: 10px;">
    <i class="fas fa-arrow-alt-circle-right"></i>
  </button>
  <img id="altImage4" src="test2.png" alt="Second Image" style="margin-top: 20px;">
</div>
<!-- CSS -->
<style>
  #mainImage4 {
    max-width: 100%;
  }

  #altImage4 {
    display: none;
  }

  #toggleButton4 {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }
</style>
<!-- JavaScript -->
<script>
  var mainImage4 = document.getElementById('mainImage4');
  var altImage4 = document.getElementById('altImage4');
  var toggleButton4 = document.getElementById('toggleButton4');

  toggleButton4.addEventListener('click', function() {
    if (mainImage4.style.display !== 'none') {
      mainImage4.style.display = 'none';
      altImage4.style.display = 'block';
    } else {
      mainImage4.style.display = 'block';
      altImage4.style.display = 'none';
    }
  });
</script>

CSSとJavaScripの部分はほとんど変更がないので割愛します。

以下はアイコンの宣言方法になります。

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
    integrity="sha384-qzF71FYJJzZUn29n7W2mJbpxHrVRSaMId9XFXgfyuKNkKjN7OZb5lwPz7g2NL2aT"
    crossorigin="anonymous">
</head>

使用するアイコンはFont Awesomeのアイコンライブラリになります。矢印アイコンを指定しています。まず、Font AwesomeのCDNリンクをHTMLヘッダーに追加します。

<div style="position: relative;">
  <img id="mainImage4" src="test1.png" alt="First Image">
  <button id="toggleButton4" style="position: absolute; bottom: 10px; left: 10px;">
    <i class="fas fa-arrow-alt-circle-right"></i>
  </button>
  <img id="altImage4" src="test2.png" alt="Second Image" style="margin-top: 20px;">
</div>

次に、button要素に追加し、クラス属性に”fas fa-arrow-alt-circle-right”を指定します。

文字を画像の上に表示する

First Image Second Image
上記のプログラムで、ボタンをクリックすると画像の上に “セカンドイメージ” という文字を表示するように変更しました。

ボタンクリックしたら画像の切り替えに加えて画像の上に文字を表示することで切り替えたことを視覚化してみました。

プログラム

<!-- HTML -->
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
    integrity="sha384-qzF71FYJJzZUn29n7W2mJbpxHrVRSaMId9XFXgfyuKNkKjN7OZb5lwPz7g2NL2aT"
    crossorigin="anonymous">
</head>
<div style="position: relative;">
  <img id="mainImage5" src="test1.png" alt="First Image">
  <button id="toggleButton5" style="position: absolute; bottom: 10px; left: 10px;">
    <i class="fas fa-arrow-alt-circle-right"></i>
  </button>
  <img id="altImage5" src="test2.png" alt="Second Image" style="margin-top: 20px;">
  <p id="imageText" style="position: absolute; top: 0; left: 0; color: #fff; background-color: rgba(0, 0, 0, 0.7); padding: 10px; display: none;">セカンドイメージ</p>
</div>
<!-- CSS -->
<style>
  #mainImage5 {
    max-width: 100%;
  }
#altImage5 {
display: none;
}

#toggleButton5 {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>

<!-- JavaScript -->
<script>
  var mainImage5 = document.getElementById('mainImage5');
  var altImage5 = document.getElementById('altImage5');
  var toggleButton5 = document.getElementById('toggleButton5');
  var imageText = document.getElementById('imageText');

  toggleButton5.addEventListener('click', function() {
    if (mainImage5.style.display !== 'none') {
      mainImage5.style.display = 'none';
      altImage5.style.display = 'block';
      imageText.style.display = 'block';
    } else {
      mainImage5.style.display = 'block';
      altImage5.style.display = 'none';
      imageText.style.display = 'none';
    }
  });
</script>

上記のプログラムは、ボタンをクリックすると画像の上に “セカンドイメージ” という文字を表示しています。適宜変更して使用して下さい。

以下は文字を表示する部分の説明になります。

 <p id="imageText" style="position: absolute; top: 0; left: 0; color: #fff; background-color: rgba(0, 0, 0, 0.7); padding: 10px; display: none;">セカンドイメージ</p>

「p」要素は、画像の上に表示されるテキストになります。最初は非表示に設定しています。

<!-- JavaScript -->
<script>
  var mainImage5 = document.getElementById('mainImage5');
  var altImage5 = document.getElementById('altImage5');
  var toggleButton5 = document.getElementById('toggleButton5');
  var imageText = document.getElementById('imageText');

  toggleButton5.addEventListener('click', function() {
    if (mainImage5.style.display !== 'none') {
      mainImage5.style.display = 'none';
      altImage5.style.display = 'block';
      imageText.style.display = 'block';
    } else {
      mainImage5.style.display = 'block';
      altImage5.style.display = 'none';
      imageText.style.display = 'none';
    }
  });
</script>

JavaScript部分では3つの要素（mainImage5、altImage5、imageText）を変数に割り当てています。次にボタンがクリックされたときに実行される関数を定義しています。

関数は、画像が現在表示されているかどうかを確認し、表示されていない場合は画像とテキストを切り替えています。

スポンサーリンク
タイトルとURLをコピーしました