画像を切り替えるJavaScript入門

画像切り替えスクリプト

画像を切り替えるには、まず画像を配列に格納します。 そして、何らかのイベントでそれらを切り替えていきます。 ここでは、画像をクリックすると次の画像が表示されるようにしてみたいと思います。

では、同じサイズの画像を3枚用意してみてください。 ファイル名は以下のようにします。 それをフォルダに入れ、フォルダ名を「image」にします。 そのフォルダと同じ場所にHTMLファイルを作成してください。

HTMLファイルとフォルダの配置

では、以下のスクリプトをHTMLのBody内に記入してみて下さい。

<img id="gazo" onclick="changeIMG()" src="image/0.jpg"
   width="320" height="240" border="0" alt="">


<script>

//画像を配列に格納する
var img = new Array();

img[0] = new Image();
img[0].src = "image/0.jpg";
img[1] = new Image();
img[1].src = "image/1.jpg";
img[2] = new Image();
img[2].src=  "image/2.jpg";


//画像番号用のグローバル変数
var cnt=0;


//画像切り替え関数
function changeIMG(){
  
  //画像番号を進める
  if (cnt == 2)
  { cnt=0; }
  else
  { cnt++; }
  
  //画像を切り替える
  document.getElementById("gazo").src=img[cnt].src;
}

</script>

＜サンプル＞画像をクリックすると別の画像に切り替わります

スクリプトの解説

では画像切り替えスクリプトの解説をしていきます。

imgタグ

画像を切り替える場合は、最初に画像タグを用意します。 そしてid属性を付けます。id名は「gazo」にしました。 さらにonclickイベントを加えて、 クリックすると関数changeIMG()を呼び出すようにします。

画像配列を作る

次にJavaScript部分を見てみましょう。 最初に画像配列imgを作っています。 画像配列はちょっと特殊な作り方になります。 以下のように2段階必要になります。

配列[] = new Image()

配列を画像用にする（画像オブジェクト）

配列[].src = "画像ファイルのパス"

画像のパスを指定する

３つの画像を配列に順に指定していきます。

画像番号を指定するグローバル変数

次に関数の外で変数cntを指定します（グローバル変数）。 このcntは画像を表示する度に変化していきます。

変数cntの値を切り替える

画像変換関数changeIMG()の最初に、 if文を使ってcntの値を変更します。cntが2の時は0に戻し、それ以外だと+1します。 表示する画像の配列番号をcntにすることによって、 画像が切り替わりる訳です。

画像を切り替える

画像を切り替えるには、以下のようにします。

document.getElementById("id名").src = 画像配列[].src

id名を付した画像タグの画像を切り替えます

本当はdocument.getElementByIdが使えるかどうか確認してから用いるのが正しい方法ですが、 今回は省略させて頂きました。

実はタイマー編のスライドショーの部分で同じことを解説しています。 このページを見てからもう一度スライドショーのページを見ると、 より理解できるかも知れません。