JavaScript | 4章：画像オブジェクトを操作しよう

INDEX

前の章に戻る次の章に進む

4章：画像オブジェクトを操作しよう

本章では、JavaScriptによる画像の操作の方法を学びます。

・HTMLのコンテンツ領域に表示される画像はJavaScriptで操作可能なオブジェクトです。
・JavaScriptで画像を操作する方法には、次の2通りがあります。

★JavaScriptで画像を操作する方法
１．ブラウザオブジェクトのimagesオブジェクトを操作する
２．DOMを構成する要素オブジェクト（img要素）を操作する

まずは、1.の方法から解説していきます。

以下のダウンロードリンクから、素材ファイルをダウンロードして下さい。

JS ４章　演習データ

演習素材について
ダウンロードした「JS4演習データ」フォルダの中には、「images_start」と「images_fin」フォルダが入っています。

images_start:作業用フォルダ
images_fin:完成データ

自分で書いたコードがうまく動作しないときは、完成データとの違いを探してみましょう。

【4-1】画像オブジェクトの操作方法

■ 1. ブラウザオブジェクトのimagesオブジェクトを操作する

「images_start」フォルダ内のindex.htmlをエディタで開き、ブラウザプレビューして下さい。

images_start / index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>画像オブジェクト</title>
  </head>
  <body>
    <div class="container">
      <!-- メイン画像 -->
      <div class="main-photo">
        <img src="images/sneaker-photo_01.jpg" class="main-photo-img" alt="" />
      </div>

      <!-- サムネイル画像 -->
      <ul class="small-photo-menu">
        <li class="small-photo-item">
          <img
            src="images/sneaker-photo_01.jpg"
            class="small-photo-img1"
            alt=""
          />
        </li>

        <li class="small-photo-item">
          <img
            src="images/sneaker-photo_02.jpg"
            class="small-photo-img2"
            alt=""
          />
        </li>

        <li class="small-photo-item">
          <img
            src="images/sneaker-photo_03.jpg"
            class="small-photo-img3"
            alt=""
          />
        </li>
      </ul>
    </div>
  </body>
</html>

サンプルコード4-1

ブラウザプレビュー

ブラウザオブジェクトのimagesオブジェクト

・ブラウザオブジェクトとして画像を扱う場合、「images」というオブジェクト名が用意されています。
・このimagesオブジェクトは、「主要なブラウザオブジェクトの階層構造」の図を見るとわかるとおり、documentオブジェクトの配下に位置するオブジェクトです。

imagesオブジェクトへのアクセス

・imagesオブジェクトにアクセスするときは、このツリーを上から辿るように「.（ドット）」でつないでいきます。windowオブジェクトは省略可能ですから、document.imagesと記述すれば良いのですが、ここでひとつ注意点があります。それは、HTMLのコンテンツ領域に画像が複数存在する場合があるということです。
・今回のサンプルファイル内には4枚の画像がimgタグで挿入されています。

imagesオブジェクトには連番がついている

・この4枚はすべてimagesオブジェクトですが、1枚1枚を個別に操作するためには、異なる名前で区別をつける必要があります。
・どのようにして、1枚1枚に区別をつけるのでしょうか。
・実は、img タグで貼られた画像オブジェクトには、HTMLファイル中に書かれている順番に、あらかじめ連番が割り当てられています。
・1枚目の画像には0番、2枚目の画像には1番、3枚目の画像には2番、4枚目の画像には3番という具合です。

■ 2. DOMを構成する要素オブジェクト（img要素）を操作する

画像オブジェクトを操作するもう一つの方法は、前章で学習したDOMのノードであるimg要素を取得して操作するという方法です。

この場合は、あらかじめimg要素にid名またはclass名をつけておき、documentオブジェクトのgetElementByIdメソッドやquerySelectorメソッドなどを使いimg要素をオブジェクトとして取得します。

img要素をオブジェクトとして取得する

以下（サンプルコード4-2）のように、imgタグ内にclassまたはid名を追加しておきます。

次に、画像オブジェクトを作成します。

imgタグにclass名またはid名を追加する

<img src="images/sneaker-photo_01.jpg" class="main-photo-img" id="main-photo-img" alt="">

サンプルコード4-2

querySelectorメソッドでclass名を取得してimg要素をオブジェクト化する場合

document.querySelector(".main-photo-img");

サンプルコード4-3

getElementByIdメソッドでid名を取得してimg要素をオブジェクト化する場合

document.getElementById("main-photo-img");

サンプルコード4-4

・1.または2.の方法でオブジェクトにアクセスできたら、そのオブジェクトのプロパティを参照することにより、画像オブジェクトを操作します。
・画像オブジェクトには、以下のプロパティが用意されています。

画像オブジェクトの主要なプロパティ

プロパティ名	使い方
src	画像のファイルパスを取得または設定する
alt	画像の代替テキストを取得または設定する
width	画像の表示幅を取得または設定する
height	画像の表示高さを取得または設定する
naturalWidth	元画像の幅を取得する
naturalHeight	元画像の高さを取得する
length	画像の数を取得する

【4-2】演習　画像オブジェクトの操作

本章で学んだ画像オブジェクトの操作法を使い、JavaScriptで次のインタラクションを作成してみましょう。

■ JavaScriptで特定の画像を表示する

・3枚のサムネイル写真のそれぞれをクリックすると、上部のメイン画像が同じ画像の拡大版に切り替わるというインタラクションを作成します。

・これから作成する機能を整理すると、次のようになります。

１．サムネイル画像にclickイベントが発生したとき、メイン画像のファイルパスが設定される

２．これを3枚のサムネイル画像ごとに実装する

・要するに、JavaScriptで「特定の画像を表示する」ということを実現すればよいのです。

・画像オブジェクトは、ファイルパスを取得または設定するプロパティとしてsrcプロパティを持っています。

・このsrcプロパティを使い特定の画像を表示するには、以下のように記述します。

まずは、ブラウザオブジェクトであるimagesオブジェクトの添字を使ってアクセスする方法で記述します。

サムネイル画像にclickイベントを設定するために、今回はaddEventListenerメソッドを使うことにします。

外部scriptファイルの関連付け

index.html

  <script src="js/images.js"></script>
</body>
</html>

サンプルコード4-5

☝サンプルコード4-5の解説

・「images_start」フォルダ内の「js」フォルダから「images.js」をエディタで開いて下さい。
・index.htmlと関連付けするために、「index.html」の直前にscriptタグを記述し、src属性でファイルパスを指定して下さい。

メイン画像の表示

続いて、メイン画像のファイルパスを設定します。

images.js

document.images[1].addEventListener("click", function () {
  document.images[0].src = "images/sneaker-photo_01.jpg";
});

サンプルコード4-7

3枚のサムネイル画像すべてにイベント処理を記述する

images.js

document.images[1].addEventListener("click", function () {
  document.images[0].src = "images/sneaker-photo_01.jpg";
});

document.images[2].addEventListener("click", function () {
  document.images[0].src = "images/sneaker-photo_02.jpg";
});

document.images[3].addEventListener("click", function () {
  document.images[0].src = "images/sneaker-photo_03.jpg";
});

サンプルコード4-8

イベントハンドラーの処理を各サムネイル画像に対して設定すると、このようになります。

完成

これで完成です。ブラウザプレビューして動きを確認してみましょう。

ブラウザプレビュー（完成デモ）

querySelectorメソッドを使う方法

images.js

document.querySelector(".small-photo-img1").addEventListener("click", function () {
  document.querySelector(".main-photo-img").src = "images/sneaker-photo_01.jpg";
})

document.querySelector(".small-photo-img2").addEventListener("click", function () {
  document.querySelector(".main-photo-img").src = "images/sneaker-photo_02.jpg";
})

document.querySelector(".small-photo-img3").addEventListener("click", function () {
  document.querySelector(".main-photo-img").src = "images/sneaker-photo_03.jpg";
})

サンプルコード4-9

querySelectorメソッドを使うことで、特定のclass名を持つimg要素を取得してオブジェクトとして扱うことができます。
上記のようにコードを書くと、クリックした画像に応じてメイン画像を切り替えられます。

これで「4章：画像オブジェクトを操作しよう」の解説を終わります。

次の章に進みましょう。