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

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

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

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

URLはダミー

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

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

java scriptでやってますね

JavaScriptとDHTMLで可能です。

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

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

参考までに上記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の値を入れ替えるのは、こちらを参考にされると良いかと思います。