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

「CSSサンプル」で、レイアウト枠（レイヤー）を説明いたしました。
このレイアウト枠（レイヤー）は画面の左上からの座標を指定することにより、画像や文字を自由な位置に持っていくことができます。
指定方法はスタイル属性の「top」、「left」を使用することと、「position」に「absolute」を指定することで実現できます。
詳しくは、「HTMLの解説」−「14.スタイル属性」をご参照下さい。
また、「CSSサンプル（カスケーディングスタイルシート）」−「画像を好きな位置に表示する（レイアウト枠（レイヤー））」や「文字を好きな位置に表示する（レイアウト枠（レイヤー））」、「画像の重ね合わせ」、
「DHTMLサンプル」−「オンマウスで画像の表示非表示1」、「オンマウスで画像の表示非表示2」なども参考にして下さい。
今回のサンプルは、レイアウト枠（レイヤー）に画像を乗せて、入力ボックスに「top」の座標、「left」の座標を入力することにより、その表示位置を変更できるようにしたものです。
画像1つだけを移動するなら、レイアウト枠（レイヤー）を使用せずに画像のスタイル属性を直接変更する方法でも可能です。

◆ 実行サンプル

【　解　　　　説　】

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

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

今回はname属性を使わず、id属性でレイアウト枠（レイヤー）の名前を特定します。

このサンプルでは次のように「id="layer1"」としました。
<div id="layer1" style="position:absolute; top:200px; left:20px; z-index:1"><img src="../../images/exp/ico005.gif" alt="郵便ポスト" width="32" height="32"></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; }

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「divmove2.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="divmov2.js"></script>

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

<div id="layer1" style="position:absolute; top:400px; left:20px; z-index:1"><img src="../../images/exp/ico005.gif" alt="郵便ポスト" width="32" height="32"></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>