javascript - 画像にテキスト入力を配置

Question

画像が入ったdivとテキストボックスがあります。私がやりたいのは、テキストボックスに何かを入力するときです。入力している間、同じものがユーザー定義のフォント面で画像に表示されます。js / jqueryを使用することは可能ですか？ありがとう。

Answer 1

はい、可能です。私はあなたのためにデモを作成しました。

デモを見る

HTML：

Title: <input type="text" id="txtbox_title" />
<br/>
<br/>
Text: <textarea id="txtbox_para" ></textarea>

<div id="imageContainer">
    <h1></h1>
    <p></p>    
</div>​

jQuery：

$("#txtbox_title").on('keyup', function(){
    var value =  $(this).val();
    $("#imageContainer h1").html(value);
});

$("#txtbox_para").on('keyup', function(){
    var value =  $(this).val();
    $("#imageContainer p").html(value);
});

</ p>

Answer 2

このために利用可能なjqueryプラグインのいずれかを使用できます。このプラグインを調べてくださいhttp://code.google.com/p/jquery-image-annotate/

ここでの作業デモ-http ：//flipbit.co.uk/jquery-image-annotation.html