Etiquetar zona de una imagen

[kid]

Hola.

¿Como puedo permitir a los visitantes "etiquetar" una zona de una imagen?, estilo facebook.

Se los agradecería.

Saludos!

[lucasphp]

a ver... podrias permitir que suban la imagen y dividirla (de acuerdo al tamaño de la imagen) en un número limitado de divs, que se ponen sobre la imagen. Entonces permitirles escribir sobre alguno de esos divs y almacenar el número del div - o id sería mejor -, el tamaño de cada uno y el texto escrito.
Al mostrar la imagen se generan los divs de nuevo sobre la imagen con su respectivo tamaño y se pega, sobre el número de div almacenado, la etiqueta correspondiente.
Es bastante trabajo creo XD.
Y es bastante confusa mi explicación :S, pero es lo primero que se me ocurre.

[buzu]

Yo no usaria divs, usaria elementos <a /> vacios y modificados con CSS para que parezcan elementos de bloque. La razón es por que puedes usar el :hover de un elemento <a> sin tener que preocuparte por el IE.

[caricatos]

Hola:

No estoy en facebook, pero tal vez lo que quieres es trabajar con mapas (la imagen, un tag map, y un tag area...)

... una página de ayuda: Creación de áreas en imágenes

Saludos

[ceSharp]

Hola kid,
Se me ha ocurrido en un momentín algo así:

-------------------------------------------
var n = 0;
function pegarDIV()
{
var nuevoDiv = document.createElement("div");
nuevoDiv.id = 'div' + n; n +=1;
nuevoDiv.style.backgroundColor = 'red';
nuevoDiv.style.position = 'fixed';
nuevoDiv.style.top = window.event.offsetY;
nuevoDiv.style.left = window.event.offsetX;
nuevoDiv.style.zIndex = n + 1;
nuevoDiv.innerHTML = 'aqui va el DIV número ' + n;
document.getElementById('foto').appendChild(nuevoD iv);
}
-----------------------------------------------------------------
en el HTML te creas un DIV, un IMG o lo que quieras con ID="foto" y el código irá él solito poniéndote divs donde hagas click con el ratón (si le pones un evento onclick al DIV con ID foto). Tiene fallos porque si haces click justo en el mismo sitio te la pone arriba, pero como ayuda y referencia puede servirte, no?

salu2

[ceSharp]

un detallín mas...

en vez de position = 'fixed'; mejor poner position = 'absolute'; porque al hacer scroll me he dado cuenta que los 'fixed' no suben; se mantienen siempre visibles, cosa que los 'absolute' no, permanecen donde estaban...

salu2 again.

[kid]

Hola a todos.... me gustaron mucho sus respuestas.

Pero el que se acerca mas es CeSharp... eso algo así lo que quiero hacer.

Lo probare y comentare que tal.

Saludos y muchas gracias!