■ 文字を好きな位置に移動する（レイアウト枠（レイヤー））

「CSSサンプル」で、レイアウト枠（レイヤー）を説明いたしました。

このレイアウト枠（レイヤー）は画面の左上からの座標を指定することにより、画像や文字を自由な位置に持っていくことができます。
指定方法はスタイル属性の「top」、「left」を使用することと、「position」に「absolute」を指定することで実現できます。

詳しくは、「HTMLの解説」−「14.スタイル属性」をご参照下さい。
また、「CSSサンプル（カスケーディングスタイルシート）」−「画像を好きな位置に表示する（レイアウト枠（レイヤー））」や「文字を好きな位置に表示する（レイアウト枠（レイヤー））」、「画像の重ね合わせ」、
「DHTMLサンプル」−「オンマウスで画像の表示非表示1」、「オンマウスで画像の表示非表示2」なども参考にして下さい。

今回のサンプルは、レイアウト枠（レイヤー）に文字を乗せて、入力ボックスに「top」の座標、「left」の座標を入力することにより、その表示位置を変更できるようにしたものです。

◆ 実行サンプル

【　解　　　　説　】

まず、文字列を記述したレイアウト枠（レイヤー）を用意します。
表示位置は、後で変更するのでどこに表示していても問題ありません。

上記で説明したとおり、スタイル属性に「position:absolute」、「top」、「left」を指定します。
今回はレイアウト枠（レイヤー）が1つなので「z-index」は使用しません。
※「z-index」はレイアウト枠（レイヤー）同士が重なった時の表示順序で、数字が大きくなるほど、より上に表示されます。

ただ、文字データだけだとどこに移動したか解からなくなるので、背景に色を付けています。
また、今回はname属性を使わず、id属性でレイアウト枠（レイヤー）の名前を特定します。

このサンプルでは次のように「id="layer1"」としました。
<div id="layer1" style="position:absolute; top:200px; left:20px; width:80px; height:40px; background-color: #ffccff;">テストサンプルの表示</div>

次に、Ｘ座標、Ｙ座標を入力するフォームをひとつ用意します。
このフォームの名前は「name="frm1"」とし、Ｘ座標の入力ボックスは「name="x"」、Ｙ座標は「name="y"」という名前を付けています。
<form name="frm1" action="dummy" class="exp01"> Ｘ座標： <input type="text" name="x" size="6">　　 Ｙ座標： <input type="text" name="y" size="6">　　 <input type="button" value="移動" onclick="div_move();"> </form>

さらに、ここにボタンも配置し、そのボタンを押すとレイアウト枠（レイヤー）が移動するようにします。

ボタンが押された時の処理は「DHTMLサンプル」で説明した「onclick=""」を使用し、その処理はJavascriptの「div_move()」というサブルーチンで処理させるように指定しておきます。

入力ボックス「x」の値は、「frm1.x.value」で、同様に入力ボックス「y」の値は「frm1.y.value」で取得できます。
それらをそれぞれ「xpos」と「ypos」にセットする方法は次のように記述できます。
xpos = frm1.x.value; ypos = frm1.y.value;

そして、その値を次のようにレイアウト枠（レイヤー）「layer1」のスタイル属性「left」と「top」にセットします。

「id」属性を使用して名前を特定する場合は、「document.all['（id属性の名前）']」という記述方法か「window.（id属性の名前）」を使います。
今回は「window.（id属性の名前）」を使ってみました。

上記の方法は、Internet Explorerでは使用できますが、それ以外のブラウザでは動作いたしません。
いろいろ調べましたところ、「getElementById()」を使用することにより可能だということがわかりました。

document.all['layer1'].style.left = xpos; document.all['layer1'].style.top = ypos;

これらを記述した「div_move()」のサブルーチンは次のようになります。
function div_move(){ divnam = "layer1"; xpos = document.frm1['x'].value; ypos = document.frm1['y'].value; document.getElementById(divnam).style.left = xpos; document.getElementById(divnam).style.top = ypos; }

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「divmove1.js」というファイル名で保存します。

function div_move(){ divnam = "layer1"; xpos = document.frm1['x'].value; ypos = document.frm1['y'].value; document.getElementById(divnam).style.left = xpos; document.getElementById(divnam).style.top = ypos; }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="divmov1.js"></script>

そして、テキストを記述した次のようなレイアウト枠（レイヤー）を「body」タグの直後ぐらいに記述します。

<div id="layer1" style="position:absolute; top:360px; left:20px; width:80px; background-color: #ffccff;">テストサンプルの表示</div>

最後にレイアウト枠（レイヤー）を移動するための入力ボックスを用意したフォームを次のように記述します。 <form name="frm1" action="dummy" class="exp01"> Ｘ座標： <input type="text" name="x" size="6">　　 Ｙ座標： <input type="text" name="y" size="6">　　 <input type="button" value="移動" onclick="div_move();"> </form>