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
HTML:
Estructura
Boton agregar texto
HTML:
-
<input name="button" type="button" style="margin-left: 30px;" onClick="AddNote();" value="agregar texto" />
Nuestra imagen y nuestro script
HTML:
-
<div class="Photo fn-container" id="PhotoContainer">
-
<img src="foot/0.jpg" width="300" height="243" galleryimg="no">
-
/* 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>
www.elserver.com
Hosting Web 2.0 - La Empresa que sobrepasa todas las expectativas...
www.slicercss.com
Tus diseños en PSD a archivos XHTML y CSS validos
www.Tilidom.com
Almacenar toda tu informacion, incluyendo fotos, videos y musica.
zap
6 - 11 - 2007
Permalink
esta chulo, pero como se hace para que se queden grabados los comentarios?
Un saludo!
Bitelia » Agregando notas de texto a las imágenes
6 - 11 - 2007
Permalink
[...] nos recomienda y nos enseña a usar Fotonotes, una librería JavaScript que nos permite agregar pequeñas notas de texto a las [...]
Luis
6 - 11 - 2007
Permalink
Podriamos conbinar esto con las galerias creadas con piccasa?? si es posible podias esplicarnos como
Starky
6 - 11 - 2007
Permalink
Interesante! Justo estaba buscando algo así para un proyecto.
Para grabar comentarios habrá que hacer uso del evento onsave, y entonces utilizar AJAX para enviar los datos y grabarlos en una BD...
Diego Lozano
6 - 11 - 2007
Permalink
¿COMO SE HACE PARA GUARDAR LOS TEXTOS?... ALGUIEN QUE SUGIERA UN STEP-BY-STEP...
MUY BUEN PROYECTO... ENHORABUENA...
[JAVASCRIPT] mouseover para imagenes - psicofxp.com
6 - 11 - 2007
Permalink
[...] mouseover para imagenes conosco de esa variable, pero estoy buscando un script... estaba viendo