テストサンプルの表示

トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

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

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

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

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

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

◆ 実行サンプル


X座標:    Y座標:   
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

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

上記で説明したとおり、スタイル属性に「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>

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



page update:2019/01/09 19:55

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom