Index

イメージ・オブジェクト

　JavaScript の実用的なTips集です。ここでは、イメージ・オブジェクトの基本的な知識と使い方を扱います。イメージ・オブジェクトはJavaScriptでは、documentオブジェクトの下に、 "Image" としてあらかじめ定義されています。これを利用してイメージを動的に変化させることができます。

[INDEX]	・イメージ・オブジェクト	... イメージ・オブジェクトの作成
	・イメージのプリロード	... イメージの事前読み込み
	・イメージの切り替え（手動）	... ボタン操作によるイメージの切り替え
	・イメージの切り替え（自動）	... タイマーによるイメージの切り替え

sasaraan programming

Exposition

■イメージ・オブジェクト

　イメージ・オブジェクトを作成するには、"new" を使って作成します。この時、画像の幅と高さを指定することもできます。また、画像ファイルは、src プロパティを使って指定します。この src プロパティの値（対象ファイル）を変えることによって、イメージ・オブジェクトの画像を動的に切り替えることが可能となります。

var obj1 = new Image();
var obj2 = new Image(width, height);
obj1.src = "xxxxxxx.jpg";

　Imageオブジェクトには、他にも、以下のようなプロパティがあります。

name（name属性値の取得・設定）, id（id属性値の取得・設定） ... 文字列
complete（読み込み完了の確認） ... true / false
width（画像の幅の取得・設定）, height（画像の高さの取得・設定） ... ピクセル値
hspace（左右マージンの取得・設定）, vspace（上下マージンの取得・設定） ... ピクセル値
border（枠幅の取得・設定） ... ピクセル値

■イメージのプリロード

　イメージをプリロードしておくと、あらかじめメモリ上にイメージオブジェクトが配置されるため、実際の表示が速くなります。プリロードは、ページを読み込む前に行う必要があるので、HEAD タグ内に記述します。

<!-- HTMLソース -->
<head>
    ...
    <script type="text.javascript"><!--
        // イメージのプリロード
        var aTrump = new Array(4);
        aTrump[0] = new Image();
        aTrump[1] = new Image();
        aTrump[2] = new Image();
        aTrump[3] = new Image();
        aTrump[0].src = "image/Spade1.gif";
        aTrump[1].src = "image/Dia1.gif";
        aTrump[2].src = "image/Heart1.gif";
        aTrump[3].src = "image/Club1.gif";

        var mBack = new Image();
        mBack.src = "image/Back.gif";
    //--></script>
</head>

Spade1.gif

Dia1.gif

Heart1.gif

Club1.gif

Back.gif

■イメージの切り替え（手動）

　下記は、ボタンをクリックしてイメージを切り替えるサンプルです。イメージの切り替えは、src プロパティにプリロードのイメージを設定することによって行います。なお、この例では、インデックスが先頭(0)にきたら末尾へ、末尾に達したら先頭(0)へ戻るようにしています。

// JavaScriptソース 
var nCurrent = 0;        // 表示中のイメージのインデックス

// トランプ画像の変更
// ... 引数 reverese : 進む時はtrue、戻る時はfalse
function ChangeTrump(reverse) 
{
    if (reverse) {
        nCurrent--;
        if (nCurrent < 0) nCurrent = aTrump.length - 1;
    } else {
        nCurrent++;
        if (nCurrent >= aTrump.length) nCurrent = 0;
    }
    document.Trump1.src = aTrump[nCurrent].src;
}

<!-- HTMLソース -->
<form name="Form1" action=""
    style="width:160px; margin:1ex; padding:1em; text-align:center; border:1px solid silver;">
    <img name="Trump1" src="image/Spade1.gif" alt=""/>
    <input type="button" value="戻る" onclick="ChangeTrump(true)" >
    <input type="button" value="進む" onclick="ChangeTrump(false)">
</form>

■イメージの切り替え（自動）

　一定時間ごとに画像を切り替えるにはタイマー（setTimeoutメソッド）を使用します。このサンプルでは、間隔を 1000ミリ秒（= 1秒）に設定して切り替えています。

// JavaScriptソース
var nIndex = 0;        // 現在表示中のインデックス

// タイマーの開始
function StartTimer() 
{
    nIndex++;
    if (nIndex >= aTrump.length) {
        nIndex = 0;
    }
    document.Trump2.src = aTrump[nIndex].src;
    setTimeout("StartTimer()", 1000);
}

<!-- HTMLソース -->
<p style="width:64px; margin:1ex; padding:1em; border:1px solid silver; text-align:center;">
    <img name="Trump2" src="image/Spade1.gif" alt="">
</p>
<script type="text/javascript"><!--
    StartTimer();
//--></script>