目次

オブジェクトなJavaScriptの基礎講座

イメージオブジェクト

◆ 概説

gifファイル等のイメージデータはImageオブジェクトで操作が可能です。
ImageオブジェクトはIMGタグのNAME属性を用いて定義します。
また、new演算子とImageコンストラクタ(メソッド)でも定義できます。

適用方法

IMGタグのNAME属性による定義
    <IMG SRC="U0.gif" NAME="number" WIDTH=60 HEIGHT=80>
    
    こうして定義したImageオブジェクトは srcプロパティで設定/取得ができます。

    document.number.src = "U1.gif";
new演算子とImageコンストラクタ(メソッド)による定義
    var img = new Image(280,140)

    この imgオブジェクトに対し、

    img.src = "U2.gif";   とすればイメージがロードされます。 

例、TESTボタンをクリックした回数を2桁のグラフィック文字で表示します。 0 から 9 のグラフィックイメージは T0.gif 〜 T9.gifで、すでにimgディレクトリにあります。

<p>
<script type="text/javascript">
     function test(){
     var n = 1;
     function test(){
        n1 = Math.floor(n/10);
        n2 = n % 10;
        document.number1.src = "../img/T" + n1 + ".gif";
        document.number2.src = "../img/T" + n2 + ".gif";
        n++;
        if (n == 100) n = 0;
     }
</script>
<IMG SRC="../img/T0.gif" NAME="number1">
<IMG SRC="../img/T0.gif" NAME="number2">
<p>
<form name="TestForm">
<p>
<INPUT TYPE="button" NAME="bt" VALUE="TEST" onClick="test()">
</p>
</form>

例の処理結果

目次