img タグの画像を動的に変更する - JavaScript

JavaScriptを利用して imgタグの画像を動的に変更するコードを紹介します。

概要

imgタグの画像を動的に変更する場合は、imgタグの要素を取得し srcプロパティを変更します。srcプロパティに変更する画像のURLを設定します。

書式

(img要素).src = (画像のURLまたはパス);

プログラム例

コード

下記のHTMLファイルを作成します。

ImageChange.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
    function LinkClick(param) {
      var elem = document.getElementById("image01");

      switch (param) {
        case 0:
          elem.src = "img/winxp.jpg";
          break;
        case 1:
          elem.src = "img/winvista.jpg";
          break;
        case 2:
          elem.src = "img/win7.jpg";
          break;
        case 3:
          elem.src = "img/win8.jpg";
          break;
        case 4:
          elem.src = "img/win10.jpg";
          break;
        case 5:
          elem.src = "img/win11.jpg";
          break;
        default:
          elem.src = "img/win11.jpg";
          break;
      }
    }
  </script>
</head>
<body>
  <p>Change images dynamically with JavaScript</p>
  <img id="image01" src="img/win10.jpg" />
  <hr />
  <a href="javascript:void(0);" onclick="LinkClick(0);">Windows XP</a><br />
  <a href="javascript:void(0);" onclick="LinkClick(1);">Windows Vista</a><br />
  <a href="javascript:void(0);" onclick="LinkClick(2);">Windows 7</a><br />
  <a href="javascript:void(0);" onclick="LinkClick(3);">Windows 8</a><br />
  <a href="javascript:void(0);" onclick="LinkClick(4);">Windows 10</a><br />
  <a href="javascript:void(0);" onclick="LinkClick(5);">Windows 11</a><br />
</body>
</html>

解説

画像の下部に表示される、Windows XP, Windows Vista, Windows 7, Windows 8, Windows 10, Windows 11 のリンクをクリックすると上部の画像が変更される動作です。
リンクをクリックすると、LinkClick()関数が呼び出されます。どのリンクがクリックされたかは、LinkClick()関数のパラメーターで渡されます。

LinkClick関数中では、imgタグのidを利用して、getElementById メソッドでimgタグの要素を取得します。続いて、引数の値を判定してクリックされたリンクに応じた画像のURLをimgタグの要素のsrcプロパティに設定します。

    function LinkClick(param) {
      var elem = document.getElementById("image01");

      switch (param) {
        case 0:
          elem.src = "img/winxp.jpg";
          break;
        case 1:
          elem.src = "img/winvista.jpg";
          break;
        case 2:
          elem.src = "img/win7.jpg";
          break;
        case 3:
          elem.src = "img/win8.jpg";
          break;
        case 4:
          elem.src = "img/win10.jpg";
          break;
        case 5:
          elem.src = "img/win11.jpg";
          break;
        default:
          elem.src = "img/win11.jpg";
          break;
      }
    }