..

JavaScriptの入門とサンプル集
JavaScript入門−画像・テキスト編(画像を動かす)     ■戻る     ■次へ     ■Home

画像を動かす

 画像を動かすにはHTMLとJavaScriptの他にスタイルシートを使わなければなりません。スタイルシートで画像の位置を設定するには次のようになります。

スタイルシートで画像の座標を設定する方法

   <img src="画像のファイル" name="画像の名前" style="position:absolute;left:X座標;top:Y座標;">


■注意
     ・position:absolute;は座標系を絶対座標に設定しています。
     ・スタイルシートの場合の座標の表記はピクセル単位の場合「px」を付けます。
      座標が125ピクセルの場合「125px」と書きます。


その他のスタイルシートについてはリファレンスマニュアルを参照してください。

これらをJavaScriptで制御するには次のようになります。

JavaScriptでスタイルシートを制御する方法

    document.画像オブジェクト.style.left=X座標
    document.画像オブジェクト.style.top=Y座標


 画像オブジェクトの部分は、<img>タグの「name」属性で指定した画像の名前の他、下記のような方法で指定することができます。
   images[参照番号](ページ先頭からの画像数で0からの通し番号)
   images["画像名"]


■補足 『JavaScriptでスタイルシートを制御する方法』

   JavaScriptでスタイルシートを制御するには下記のとおりになります

     オブジェクト名.style.スタイルシートのプロパティ名

   スタイルシートのプロパティ名中で「-」で区切られている場合は「-」を抜いて次の一文字目を大文字
   にしたものがJavaScriptでのスタイルシートのプロパティ名になります

     (例) scrollbar-base-color → scrollbarBaseColor
         background-color   → backgroundColor



 それでは、これらを使って画像が動くプログラムを作ってみましょう。
      

<html>

<head>
<title>画像を動かす</title>

<script language="JavaScript"><!--
x=0;
y=16;
v=2;

function moveBall()
{
x+=v;
if((x>224)||(x<0))v=-v;

document.ballImage.style.left=x;
}
// --></script>


</head>

<body onLoad="setInterval('moveBall()',25)">


<img src="sample13.gif" name="ballImage" style="position:absolute;left:0px;top:16px;">

</body>
</html>

〜sample13.html〜のリスト





変数の初期設定



関数「moveBall()」の設定
ボールが画面を左右に行ったり来たりする処理をします。
x座標にvを加算
ボールが画面の端まできたら反転させます。
右端を超えたらv=-2に、左端を超えたらv=2になります。
スタイルシートを操作してボールの座標を変更します。
関数が自動的に呼び出されるようにタイマーをセットします。




HTMLが読み込まれたら関数「moveBall()」を実行します。
画像を扱う場合にはHTMLが読み込まれて画像が生成された後に実行しなければいけません。
スタイルシートを使ってボールを最初の場所に描画します。

ご自身のPCで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

sample13.gif


【参照】割り込み処理


   ■sample13.html実行する


sample13.htmlの実行画面


..

JavaScript入門−画像・テキスト編(画像を動かす)     ■戻る     ■次へ     ■Home


..