Photo Notes es una librería JavaScript que nos permite agregar pequeñas notas a nuestras imágenes al estilo Flickr, pero lo mejor es que nos permite visualizar en tiempo real, actualizar, y manipular nuestras notas online.

Ver demo - Descarga Completa Version Oficial - Ver demo oficial

Descarga JavaScript - PhotoNotes.js
Descarga CSS - PhotoNotes.css

Utilizando el código es bastante sencillo: En nuestro ejemplo..demo

En nuestro encabezado

PLAIN TEXT
HTML:
<script src="foot/PhotoNotes.js" type="text/javascript"></script>
</p>
<link href="foot/PhotoNotes.css" rel="stylesheet" type="text/css">

Estructura
Boton agregar texto

PLAIN TEXT
HTML:
<input name="button" type="button" style="margin-left: 30px;" onClick="AddNote();" value="agregar texto" />

Nuestra imagen y nuestro script

PLAIN TEXT
HTML:
<br>
            <div class="Photo fn-container" id="PhotoContainer">
                <img src="foot/0.jpg" width="300" height="243" galleryimg="no">
            <br>
            <script>
                /* create the Photo Note Container */
                var notes = new PhotoNoteContainer(document.getElementById('PhotoContainer'));
               
                /* create a couple of notes, and add them to the container */
                var note1 = new PhotoNote('boca',3,new PhotoNoteRect( 180,113,60,60));
                note1.onsave = function (note) { return 1; };
                note1.ondelete = function (note) { return true; };
               
                var note2 = new PhotoNote('nariz',3,new PhotoNoteRect(259,111,15,15));
                note2.onsave = function (note) { return 1; };
                note2.ondelete = function (note) { return true; };
               
                notes.AddNote(note1);
                notes.AddNote(note2);
               
                function AddNote()
                {
                    var newNote = new PhotoNote('Agrega tu texto y acomodalo en una seccion.',-1,new PhotoNoteRect(10,10,50,50));
                    newNote.onsave = function (note) { return 1; };
                    newNote.ondelete = function (note) { return true; };
                    notes.AddNote(newNote);
                    newNote.Select();
                }
               
       
            </script>
</div>