Webブラウザで、画像内の座標をクリックまたはドラッグで選択し、そこにテキストボックスを作り、文字を入力して、座標とテキストをサーバに送信するような仕組みのCGI+クライアントを作ろうと思います。クライアント側は何の言語だと実現可能ですか?URLはなるべく、画像の座標指定とテキストボックス生成についてお願いします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/06/03 12:01:04
  • 終了:--

回答(4件)

id:tsupo No.1

つぽ回答回数25ベストアンサー獲得回数12005/06/03 12:28:10

ポイント20pt

Javascript で座標を取得することができます(が、ブラウザによって、取得方法に違いがありますので注意してください)

http://www.tohoho-web.com/js/dom.htm

ドキュメントオブジェクトモデル(DOM)

テキストボックスの生成は、DOM と呼ばれる技術を利用し、クライアント側で html 自体を動的に書き換えることで実現します。

もしくは(専用の)クライアントを C#.NET 等の .NET 対応言語で書けば、座標の取得、テキストボックスの生成等は自在にできます。要するにブラウザ自体を自前で作る訳です。

id:irukajp

ありがとうございます。ブラウザによって取得方法が違うのはやっかいですね。画像の上にテキストボックスは、JavaScriptでは作れないわけですね。C#は、クライアントのOSが多種多様なので、使えません。

2005/06/03 12:48:34
id:tomo_k No.2

tomo_k回答回数426ベストアンサー獲得回数262005/06/03 12:31:22

URLはダミー


Java AppletあるいはFlashで実現可能だと思います。

id:irukajp

はい

2005/06/03 12:49:08
id:FMR No.3

FMR回答回数406ベストアンサー獲得回数02005/06/03 12:32:08

ポイント20pt

http://wema.sourceforge.jp/

wema - 付箋指向の多目的ツール

Wema(似たような感じのCGI)とかは

java scriptでやってますね

id:irukajp

わーまさにこんなのを探していました。JavaScriptですね。これを参考に、うちで必要な機能と組み合わせればよさそうです。ありがとうございます。

2005/06/03 12:54:42
id:typista No.4

typista回答回数359ベストアンサー獲得回数72005/06/03 13:22:29

ポイント30pt

http://jsm.suepon.com/script/jsm31.html

マウスでレイアを移動する - JavaScript Market

JavaScriptとDHTMLで可能です。

このURLではドラッグして移動するというものですが、テキストボックスを表示するためには、zindexというプロパティを操作します。

このURLでも2つの画像のレイヤを入れ替えて、クリックした方が上に重なるようにしています。


参考までに上記URLを少し改良してみました。

testと書いてあるボックスをドラッグすると下に隠れていたテキストボックスがあわられます。

以下サンプルの改良ポイントは、

①cgiサーバのURLへ変更

 action=”http://hoge

②画像をクリックしたときにzIndexを変える

 onclick=””

 レイヤを入れ替える関数を作成しておき、上記の””の中でコールします。

 zIndexは値が大きいほど、上に重なります。また、同じzIndex値の場合、後から書かれたほうが上になります。

③マウスの座標の取り方

 e.layerX/e.layerY、event.clientX/event.clientYのようにブラウザにより異なります。


<!-- position:absolute を指定したdivで囲んだ物は幾つでも全て移動の対象になります -->


<div id=”a” onClick=”” style=”position:absolute; left:0px; top:0px; z-index:0; width: 100px; height: 30px”>

<form action=”http://hoge” method=”post”>

<input type=”text” style=”width: 100px;”>

</form>

</div>

<div id=”b” onclick=”” style=”position:absolute; left:0px; top:0px; z-index:1; background-color: #ffffff;; width: 100px; height: 30px”>

<table border=”1”>

<tr>

<td>test</td>

</tr>

</table>

</div>

</td></table>

</div>

zIndexの値を入れ替えるのは、こちらを参考にされると良いかと思います。

id:irukajp

詳細な技術的な回答ありがとうございます。大いに参考になります。JS+DHTMLですね。これでコード作ってみます。対応しているブラウザをチェックして、導入を決めます。

2005/06/03 23:35:07

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • ともろぐ - うーん 2008-04-12 00:47:15
    うーん て師に相談した件。 この辺が使えるのかもしれない。 ちゃんと読んでないけど。 とりあえずメモ。 そのうち見よう。 マウスでレイアを移動する - JavaScript Market Webブラウザで、画
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません