赤い点と画像

にタイトルを追加し、私はその上に絵で、HTMLページを持っていると、ユーザは赤のドットと赤い点にタイトルを追加するには画像をクリックすることができたいと思います。いくつかの点を追加した後、彼はそれを保存または印刷できるはずです。赤い点と画像

レール、HTML、CSS、および（またはなし）のjavascriptのルビーでこれを実施するための最良の方法は何ですか。

出典

2009-09-02 Beffa

ドットは、物事をマークすることになっていますか？ Facebookのようなものがありますか？ – Thomaschaaf

はい点は物をマークするはずです – Beffa

ユーザーがクリックした場所に、私はそこ<div style="position: relative; top: ?px; left: ?px"><img src="red dot.jpg">Dot title</div>を置きます。 onclickイベントはバックグラウンドでトリガーを行い、ここにはhow to get the Cursor Positionです。

position: relative全部が<div>ブロックの内部にあると仮定。 document.createElementとappendChildを見て、それらが必要になります。

たぶん、あなたは、ユーザーのサーバーに行って何を派遣するフードの下plottingsを保存することもしたいです。

出典

2009-09-02 06:49:23 Havenard

function paint_dot（e、comment）{ pitch = document.getElementById（ "pitch"）; div = document.createElement（ "div"）; dot_title = document.createTextNode（コメント）; div.appendChild（dot_title）; style = document.createAttribute（ "style"）; カーソル= getPosition（e）スタイル。"+ cursor.y +" px; left： "+ cursor.x +" px;背景：url（dot.png）no-repeat;パディング - 左：10px; div.setAttributeNode（style）; pitch.appendChild（div）; //paint_dot(self.event）; } – Beffa

写真のギャラリーを表示し、印刷するか保存するかを選択するのは問題ですか？

フォーム内の画像のテーブルを埋め込み、および選択を行うために、チェックボックスを使用する方が簡単かもしれません。非常に単純なことのために

出典

2009-09-02 06:49:00 pavium

一つの可能性は、以下のようになります：

Railsの
はjQueryを使ってクリックイベントを処理した画像を含むビューを作成します。
ユーザがタイトルを要求するJavascriptダイアログを表示するとき
ユーザが[OK]をクリックすると、アプリケーションに新しいドットについて通知するRailsコントローラにAjaxリクエストを送信します。
コントローラは、その情報をデータベースまたはセッションに追加して画像を更新する必要があります。たとえば、ImageMagickなどの画像ライブラリを実際に追加します。
その後、Ajaxリクエストが完了した後に画像を再ロードします。

出典

2009-09-02 06:50:16

サーバーへのラウンドトリップを節約するために、画像にドットとタイトルをブラウザで直接描画することができます。

HTML5 <canvas>要素、SVG、またはFlashなどで実現できます。キャンバスのブラウザサポートは非常に優れています。私はそれを使用します。

出典

2009-09-02 07:03:21 bucabay

これはCSSで作成できます。

<div class="image"> 
    <div class="permalink"><a href="#">Click here.</a></div> 
    <img src="#" /> 
</div>

次に、あなたのCSSは次のようになります。

.image .permalink { display: none; position: absolute; top: 0px; left: 0px; } 
.image:hover .permalink { display: block; } 
.image .permalink { background: url(red-dot.gif) no-repeat; }

出典

2009-09-02 11:49:54

答えて

関連する問題