将文本输入放在图像上

Question

我的div里面有图像，也有文本框。我想要做的是当在文本框中键入内容时，当我键入相同内容时，应使用用户定义的font-face显示在图像中。是否可以使用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