人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: irukajp
●カテゴリ:コンピュータ
✍キーワード:CGI URL Web クライアント クリック
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● つぽ
●20ポイント

http://www.tohoho-web.com/js/event.htm#screenXe

イベント(Event)

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

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

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

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

http://www.microsoft.com/japan/msdn/vcsharp/

Visual C# ホームページ

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

◎質問者からの返答

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


2 ● tomo_k
●0ポイント

http://d.hatena.ne.jp/tomo_k/

ともの日記

URLはダミー


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

◎質問者からの返答

はい


3 ● FMR
●20ポイント

http://wema.sourceforge.jp/

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

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

java scriptでやってますね

http://l.yagi.tc/admin/

◎質問者からの返答

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


4 ● typista
●30ポイント

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>

http://www5e.biglobe.ne.jp/~ksntc/p/index/js/imgzindex.html

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ