在圖像上放置文本輸入

Question

我的div裏面有圖像，也有文本框。我想要做的是當在文本框中輸入內容時，同時我輸入的內容應該用用戶定義的字體顯示在圖像中。是否有可能使用js/jquery？謝謝。

Answer 1

是的，它是可能的。我爲你創建了一個演示。

See Demo

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); 
}); 

Answer 2

你可以使用任何可用的jQuery插件。 看看這個插件http://code.google.com/p/jquery-image-annotate/

工作演示這裏 - http://flipbit.co.uk/jquery-image-annotation.html