４

 　ポジション

basic.gif (3042 バイト)

１

 　オブジェクトの位置を指定する

オブジェクトの位置を指定する命令をやってみよう。
といってもDHTMLで行うのは単なる位置指定ではなく、動的にいつでも位置を変更できるんだ。
そのまえに、スタイルシートでの位置指定の方法を思い出そう。
jamp.gif (1016 バイト)スタイルシート講座（自由に配置を指定したい）
それがわかったところで、DHTMLでの位置指定の命令をやってみるね。

★.style.▲ = ■;・・・・・★の位置を▲から■の位置に配置する。
▲：left , top
■：フォントの色

まず、三角の指定についてなんだけれど、
スタイルシートでは位置指定に、right,left,top,bottomという４つの指定方法があったよね。
DHTMLではleftかtopだけなんだ。
この２つによって位置の指定をしていくんだよ。
つまり、
    ★.style.left = 100
だと、左（left）から100の位置に指定されるんだ。
また、
    ★.style.top = 100
の場合は上（top）から100の位置に指定されるんだね。
（※相対位置か絶対位置かは指定しようとしているタグの中で指定されている。）

じゃあ、これを使ってプログラムを書いてみよう。

下の表の左
<A id="posi" style={position:relative;left:0;top:0;}>ヨッシ〜！！</A>
↑始めの初期設定は(0,0)の位置。idはposi

下の表の右
<A onclick="posi.style.left=200;posi.style.top=0;">右上</A><br>
<A onclick="posi.style.left=200;posi.style.top=100;">右下</A><br>
<A onclick="posi.style.left=0;posi.style.top=0;">左上</A><br>
<A onclick="posi.style.left=0;posi.style.top=100;">左下</A><br>
↑それぞれで、変更位置を指定している。

これを実行すると、

ヨッシ〜！！

　

　

　

いろんな位置に移動するよ

 右上
右下
左上
左下

↑好きなのをクリックしてごらん

このように一度指定した場所から、文字のクリックなどによっていつでも動的に動かすことができるんだ。
JavaScriptでもやったsetTimeout()を使って一定時間ごとに位置を変えれば、文字などが動いているように見せることができるね。

back.gif (1116 バイト)　ポジション
 next.gif (705 バイト)　ウィンドウをスクロールさせる