jQuery Plugin To Add Text Notes Over The Images - Text Over

textover is a jQuery plugin that allows you to add text notes over an image by clicking on the top of the image. It also provides a getData() method to retrieve the text notes you added. Press the ESC key will remove your last typed text.

How to use it:

1. Load the jQuery library and jQuery textover plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.textover.min.js"></script>

2. Insert an images in your page and assign an unique ID to it.

<img src="demo.jpg" id="demo" alt="Demo Image" />

3. Create a button to show the retrieved data in a container.

<div id="data">The data goes here</div>
<button id="show">Show Data</button>

4. The javascript.

<script type="text/javascript">
jQuery(function($){

var textover_api;

$('#demo').TextOver({}, function() {
textover_api = this;
});

$('#show').click(function () {
html = '';
$.each(textover_api.getData(), function() {
html += 'Text &raquo; ' + this.text + ' Left &raquo; ' + this.left + ' Top &raquo; ' + this.top + '<br />';
});
$('#data').html(html).show();
});

});

</script>

---

This awesome jQuery plugin is developed by cschand. For more Advanced Usages, please check the demo page or visit the official website.