Vou mostrar como é facil fazer aquelas anotações em imagens como as do flickr e orkut.
Depois de feito, basta vc usar a criatividade de como usar.
Bom, vamos la,
Antes de começarmos com os códigos, baixe o marcador.js, jquery_002.js, jquery.js e o imgnotes.css.
Depois de baixar os arquivos acima, vamos começar.

<br />
    <script type="text/javascript">
            notes = [
                {
                    //Você pode colocar o seu loop nessa linha, assim a imagem pode ficar com várias marcações.
                    "x1":"10","y1":"10","height":"110","width":"100","note":"Hello World!"
                }
            ];
        $(window).load(function () {
            $('#imagem').marcarImagem();

            //$('#imagem').imgAreaSelect({ onSelectChange: showaddnote })
            //Esconde o formulario - Hide the form
            $('#cancelnote').click(function(){
                $('#imagem').imgAreaSelect({ hide: true });
                $('#noteform').fadeOut();
            });
            //Mostra o formulario de marcação, você pode especificar o tamanho e posição dele.
            //x1: 120, y1: 90, x2: 280, y2: 210
            $('#addnotelink').click(function(){
                $('#imagem').imgAreaSelect({ onSelectChange: showaddnote, x1: 120, y1: 90, x2: 280, y2: 210 });
                return false;
            });
        });

    function showaddnote (img, area) {
        imgOffset = $(img).offset();
        //Usando os tamanhos que você passou na funcao $(window).load(function (), ele posiciona o formulario de marcação.
        form_left  = parseInt(imgOffset.left) + parseInt(area.x1);
        form_top   = parseInt(imgOffset.top) + parseInt(area.y1) + parseInt(area.height)+5;

        $('#noteform').css({ left: form_left + 'px', top: form_top + 'px'});
        //Mostra o formulario - Show the form
        $('#noteform').show();

        $('#noteform').css("z-index", 10000);
        $('#NoteX1').val(area.x1);
        $('#NoteY1').val(area.y1);
        $('#NoteHeight').val(area.height);
        $('#NoteWidth').val(area.width);

    }
    </script><br />

Coloque o código acima dentro dos padrões W3C.

<br />
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
    <html xmlns="http://www.w3.org/1999/xhtml"><br />
    <head><br />
        <title>Padrões W3C</title><br />
        <!-- Seu Script --><br />
    </head><br />
        <body></p>
<p>        </body><br />
    </html><br />

Agora vamos ao html.

</p>
<p style="text-align: center;">
    <img id="imagem" src="tern.jpg" alt="" />
</p>
<p>

O código acima é onde a imagem à ser marcada vai ficar.

</p>
<div id="noteform">
<form id="NoteAddForm" action="?acao=AddPost" method="post">
        <fieldset><br />
            <legend>Descricao</legend><br />
                <input id="NoteX1" name="x1" type="hidden" /><br />
                <input id="NoteY1" name="y1" type="hidden" /><br />
                <input id="NoteHeight" name="height" type="hidden" /><br />
                <input id="NoteWidth" name="width" type="hidden" /><br />
                <textarea id="NoteNote" name="note"></textarea><br />
        </fieldset></p>
<div class="submit">
        <input type="submit" value="Marcar" /><br />
        <input id="cancelnote" type="button" value="Cancelar" />
    </div>
</form>
</div>
<p>

Acima temos o formulário para o envio da mensagem.

Agora é você usar a criatividade para rodar em sua aplicação, o principal esta ai.
Veja o exemplo na prática.
Demo

Until next time.