Can you use this with the Image module...

Add the following function to your template.php:

function phptemplate_image_body($node, $size) {
  if (user_access('view image annotations') || user_access('create image annotations') || user_access('administer image annotations')) {
    // Retrieve all the annotations for that image field
    // We sort by area (height*width) to make sure small annotations are always on the top and avoid having some unhoverable ones
    $result = db_query('SELECT i.*, c.uid, c.comment, u.name FROM {image_annotate} i INNER JOIN {comments} c ON i.cid = c.cid JOIN {users} u ON c.uid = u.uid WHERE c.nid = %d ORDER BY (i.size_height*i.size_width) ASC', $node->nid);

    // Build the array of notes settings
    global $user;
    $notes = array();
    while ($note = db_fetch_object($result)) {
      $editable = user_access('administer image annotations') || (user_access('create image annotations') && $note->uid && $note->uid == $user->uid);
      $author = theme('username', $note);
      $text = '"'. check_plain($note->comment) . '"<span class="author"> '. t('by') .' '. $author . '</span>';

      if (user_access('access comments')) {
        $text .= '<span class="actions">» '. l(t('View comment'), $_GET['q'], array('fragment'=>'comment-'. $note->cid)) .'</span>';
      }

      $notes[] = array(
        'aid' => $note->aid,
        'cid' => $note->cid,
        'uid' => $note->uid,
        'height' => $note->size_height,
        'width' => $note->size_width,
        'top' => $note->position_top,
        'left' => $note->position_left,
        'text' => $text,
        'editable' => $editable,
      );
    }
    
    // Build the field settings
    $settings = array(array(
      'nid' => $node->nid,
      'field' => 'image',
      'notes' => $notes,
      'editable' => user_access('administer image annotations') || user_access('create image annotations'),
    ));
    
    // Load all the JS and CSS magic
    drupal_add_js(array('imageAnnotate' => $settings), 'setting');
    jquery_ui_add(array('ui.resizable', 'ui.draggable'));
    drupal_add_js('misc/collapse.js');
    drupal_add_js(drupal_get_path('module', 'image_annotate') .'/tag.packed.js');
    drupal_add_css(drupal_get_path('module', 'image_annotate') .'/tag.css');
    $class = 'imagefield imagefield-image image-annotate-image';
    return image_display($node, $size, array('class' => $class));
  }
}

I am leaving this as "needs review": it should be put into the readme.

but how we activate de module, it depends on ImageField (disabled), Jquery_ui (missing), Content (enabled), FileField (disabled), imagefiled is not compatible with image module

it does not hurt to enable the imagefield module to satisfy the dependency. or you edit the .info file and remove it.

This doesn't seem to work with http://drupal.org/project/imagefield_crop. Any way to fix this? I navigate to the "Display fields" section of my Content Type and don't see an option for image annotations. Comments are enabled on this Content Type also.

Inserting the code in #1 into the theme's template.php allows image_annotate to work in conjunction with the image module, taking #2 and #3 into account. Imagefield_crop in #4 should be a seperate feature request.

Support for the Image module MAY be added in the next version of Image Annotate (2.3).

i paste this into the template.php and encounter below problem.
"Fatal error: Call to undefined function jquery_ui_add() in .../template.php on ..."

Any updates on this issue?