..

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[参照番号]（ページ先頭からの画像数で０からの通し番号）
　　　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が読み込まれて画像が生成された後に実行しなければいけません。
スタイルシートを使ってボールを最初の場所に描画します。
ご自身のＰＣで入力される場合は以下の画像ファイルを右クリックでHTMLファイルと同一フォルダの中に保存してください

sample13.gif

【参照】割り込み処理

　　　■sample13.html実行する

sample13.htmlの実行画面


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

..