[JavaScript] img タグの画像を動的に変更する
このページのタグ:[JavaScript]
JavaScriptでimgタグの画像を動的に変更するコードを紹介します。

概要

imgタグの画像を動的に変更する場合は、imgタグの要素を取得し、srcプロパティを変更します。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;
        default:
          elem.src = "img/win10.jpg";
          break;
      }
    }
  </script>
</head>
<body>
  <p>Image</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 />
</body>
</html>

解説

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


   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;
        default:
          elem.src = "img/win10.jpg";
          break;
      }
    }
LinkClick関数中では、imgタグのidを利用して、getElementById メソッドでimgタグの要素を取得します。続いて、引数の値を判定してクリックされたリンクに応じた画像のURLをimgタグの要素のsrcプロパティに設定します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


画面下部の[Windows XP]のリンクをクリックします。下図の画面に変わります。上部の画像が変化することが確認できました。


[Windows Vista]のリンクをクリックします。上部の画像が変化します。


同様に[Windows 7]のリンクをクリックします。上部の画像が変化します。


同様に[Windows 8]のリンクをクリックします。上部の画像が変化します。


一番下の[Windows 10]のリンクをクリックします。上部の画像が最初に表示された画像に戻ります。


プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)