
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
</p>
<link href="foot/PhotoNotes.css" rel="stylesheet" type="text/css">
Estructura
Boton agregar texto
Nuestra imagen y nuestro script
<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>












zap
06-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
06-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
06-11-2007
Permalink
Podriamos conbinar esto con las galerias creadas con piccasa?? si es posible podias esplicarnos como
Starky
06-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
06-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
06-11-2007
Permalink
[...] mouseover para imagenes conosco de esa variable, pero estoy buscando un script... estaba viendo