0

スマートフォンアプリを開発していて、画像の上に「メモ」または「マーカー」を配置しようとしています。私はこれに対する潜在的な解決策を持っていません、私はこの種のことで新しく始めています。

アプリの配布にはhttp://www.icenium.com/を使用しています。

どこかをタップ/クリックして要素（div）を追加し、javascriptを使用して画像のその時点に常に配置することはできますか？

ありがとう！

4

3 に答える 3

1

それはすべて、要素の相対的および絶対的な配置にかかっていると思います。次に、すべての画像をループして、画像の幅と高さの変数を取得してから、画像の上部の位置を見つける必要があります。次に、これらすべてを使用して、ボタンをクリックしたときに「メモ」を配置できます。

これがJSフィドルです。もっとよく説明する必要があります-http://jsfiddle.net/davemcmillan/6cEEy/

画像を画像タグに含める必要がある場合の幅と高さ。

乾杯、

デイブ

于 2012-09-27T12:23:12.087 に答える
1

私があなたの言うことを正しく理解していれば、ユーザーがクリックする正確な場所に何らかのツールチップを配置する必要があります。jQueryを使用してこれを行う簡単な例を次に示します：http：//jsfiddle.net/QDJGc/。

于 2012-09-27T12:23:20.143 に答える
1

ここにいくつかのコードがあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
        <script language="JavaScript">
            function point_it(event){
                pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
                pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
                document.getElementById("imgcr").style.left = (pos_x-7)+"px" ;
                document.getElementById("imgcr").style.top = (pos_y-8)+"px" ;
                document.getElementById("imgcr").style.visibility = "visible" ;
                document.pointform.form_x.value = pos_x;
                document.pointform.form_y.value = pos_y;
            }
        </script>
  </head>
  <body>
    <form name="pointform" method="post">
        <div id="pointer_div" onclick="point_it(event)" style = "background-image:url('http://www.woofers.net/communities/6/004/008/640/226/images/4555331877.jpg');width:500px;height:333px;">
        <img src="http://galeriejeanclaudebergeron.ca/images/redDot.png" id="imgcr" style="position:relative;visibility:hidden;z-index:2;"></div>
        You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
    </form>
  </body>
</html>

これをコピーして新しいファイルに貼り付け、ブラウザで開きます。この例では、divをその位置に移動しますが、複数のポイントが必要な場合は、クローンを作成する必要があります

jsfiddleで試してみてください

于 2012-09-27T12:09:27.877 に答える