jquery imgnotes

imgnotes is nothing but notes over images,still not clear?okie, this is something similar to tagging the images as we do in social networking sites like facebook,orkut...etc.




Include the following in the head of your html:



<link rel="stylesheet" type="text/css" href="css/imgnotes.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imgnotes-0.1.js"></script>


and the files can be downloaded from http://plugins.jquery.com/project/ImgNotes.


The notes to be tagged is given in json format,for eg as below



notes = [ {
"x1" : "195",
"y1" : "183",
"height" : "20",
"width" : "26",
"note" : "<b>  DP means DurgaPrasad not Dharu Party</b>"
} ];

x1 - The X co-ordinate of the top-left corner of the note area
y1 - The Y co-ordinate of the top-left corner of the note area
note - The text of the note, it supports HTML as well

height and width specifies the image range to be covered.

x1 and y1 are relative the position of the image on which the notes will be displayed, so when you move the image around in your page the the notes will move with it.

and the following piece of js will do the work for you.

$(window).load(function() {

$('#tern').imgNotes(notes);

  //someMoreOnClickFunctions();

});

Demo application available at http://www.sanisoft.com/downloads/imgnotes-0.1/example.html

This plugin is very useful in making the images of your website more dynamic and user interactive and can be used to make various parts of your static image as navigational sources....

Thanks for Reading.... cheers :-)