位置の指定２JavaScript入門

位置を指定するスクリプト

前のページで作ったHTMLファイルをそのまま利用してみたいと思います。 Body内の続く部分に、以下のフォームとJavaScriptを記入してみてください。

<form name="pos">
赤の四角：<br>
Left:<input type="text" value="50">
Top:<input type="text" value="50">
Z-index:<input type="text" value="2">
<input type="button"value="変更" onclick="sqMove(0)"><br>
青の四角：<br>
Left:<input type="text" value="80">
Top:<input type="text" value="80">
Z-index:<input type="text" value="1">
<input type="button"value="変更" onclick="sqMove(1)"><br>
</form>

<script>

//２つのID付divタグの情報を配列にしておく
var square = new Array();
square[0]=document.getElementById("aka");
square[1]=document.getElementById("ao");

function sqMove(num)
{
  var n = parseInt(num);  //引数を数値に変換
  var x,y,z;          //座標を入れる変数の宣言
  
  //数値以外が入力された時のエラー回避
  try
  {
     //テキストボックスの値を数値に変換して座標変数に入れる
     x = parseInt(document.pos.elements[n*4+0].value);
     y = parseInt(document.pos.elements[n*4+1].value);
     z = parseInt(document.pos.elements[n*4+2].value);
     
     //divタグで表される四角の枠の位置を変更
     square[n].style.left   = x+"px";
     square[n].style.top    = y+"px";
     square[n].style.zIndex = z;
  }
  catch(e)
  {
    alert("数値を入力してください！");
  }
}  
        
</script>

上記のサンプルです↓

スクリプトの説明

では上記のスクリプトを詳しく見ていきたいと思います。

フォーム部分

フォーム名は「pos」にしました。 赤の四角と青の四角の横・縦・奥行を入力するテキストボックスと、 変更を実現するボタンを設置しています。ボタンを押すと、関数sqMove()を呼び出します。 引数を用いてどちらの四角を動かすか識別できるようにしています。

divタグの情報を配列にする

続いてJavaScript部分を見てみます。最初に配列squareを作成して、 document.getElementById(ID名)を入力しておきます （squareは正方形の意）。今回は縦・横・奥行で3回スタイルを変更するので、 配列にしておけばスクリプトがすっきりします。

関数sqMove()

関数の最初に引数をparseInt()を使って数値にし、変数nに代入します。 また、x（横）,y（縦）,z（奥行）の座標を入れる変数も宣言しておきます。

続いてtry～catch()を使って、エラーを回避します。 テキストボックスに数値以外を入力された時にスクリプトが停止するのを防ぎます。

try{}の中でテキストボックスの値を数値に変換し、座標用の変数に代入します。 elements[]の番号ですが、 各四角に用いたテキストボックスは３、ボタンが１、合計４つのフォームパーツで成り立っています。 従ってn*4+0で「Left:」の、n*4+1で「Top:」のテキストボックスを表すことができます。

座標が取得できたら、DOMを使って移動します。 位置情報を指定するには、left、top、zIndexを使います。

document.getElementById("ID名").style.left

左からの位置を指定します。

document.getElementById("ID名").style.top

上からの位置を指定します。

document.getElementById("ID名").style.zIndex

奥行きを指定します。

このページのテクニックとタイマーを使うと、マーキーのように文字を流したり、 画像を動かしてアニメーションのように見せることもできます。 またマウスカーソルが乗ると逃げるボタンなども作ることができます（笑）。 是非色々なシーンで活用なさってください。