diff --git modules/image/cropping-arrows.png modules/image/cropping-arrows.png
new file mode 100644
index 0000000..04c58c0
Binary files /dev/null and modules/image/cropping-arrows.png differ
diff --git modules/image/image.admin.css modules/image/image.admin.css
index f5aa597..35179cc 100644
--- modules/image/image.admin.css
+++ modules/image/image.admin.css
@@ -49,13 +49,52 @@ div.image-style-preview div.preview-image div.height span {
 /**
  * Image anchor element.
  */
-table.image-anchor {
+.image-anchor table {
   width: auto;
 }
-table.image-anchor tr.even,
-table.image-anchor tr.odd {
+.image-anchor table tr.even,
+.image-anchor table tr.odd {
   background: none;
 }
-table.image-anchor td {
-  border: 1px solid #CCC;
+.image-anchor table tr,
+.image-anchor table td {
+  border: 1px solid #ccc;
+}
+.image-crop-widget table {
+  height: 90px;
+  width: 90px;
+}
+.image-crop-widget td {
+  cursor: pointer;
+}
+.image-crop-widget input {
+  display: none;
+  visibility: hidden;
+}
+.image-crop-widget td.arrow-selected {
+  background: #bdf;
+}
+.image-crop-widget td.arrow-n {
+  background: url(cropping-arrows.png) no-repeat -60px 0;
+}
+.image-crop-widget td.arrow-ne {
+  background: url(cropping-arrows.png) no-repeat -90px 0;
+}
+.image-crop-widget td.arrow-e {
+  background: url(cropping-arrows.png) no-repeat -120px 0;
+}
+.image-crop-widget td.arrow-se {
+  background: url(cropping-arrows.png) no-repeat -150px 0;
+}
+.image-crop-widget td.arrow-s {
+  background: url(cropping-arrows.png) no-repeat -180px 0;
+}
+.image-crop-widget td.arrow-sw {
+  background: url(cropping-arrows.png) no-repeat -210px 0;
+}
+.image-crop-widget td.arrow-w {
+  background: url(cropping-arrows.png) no-repeat 0 0;
+}
+.image-crop-widget td.arrow-nw {
+  background: url(cropping-arrows.png) no-repeat -30px 0;
 }
diff --git modules/image/image.admin.inc modules/image/image.admin.inc
index 02bb745..9dd36bd 100644
--- modules/image/image.admin.inc
+++ modules/image/image.admin.inc
@@ -552,6 +552,8 @@ function image_scale_form($data) {
  *   The current configuration for this crop effect.
  */
 function image_crop_form($data) {
+  drupal_add_js(drupal_get_path('module', 'image') . '/image.js');
+
   $data += array(
     'width' => '',
     'height' => '',
@@ -825,14 +827,14 @@ function theme_image_anchor($variables) {
   foreach (element_children($element) as $n => $key) {
     $element[$key]['#attributes']['title'] = $element[$key]['#title'];
     unset($element[$key]['#title']);
-    $row[] = drupal_render($element[$key]);
+    $row[] = array('data' => drupal_render($element[$key]), 'class' => $key);
     if ($n % 3 == 3 - 1) {
-      $rows[] = $row;
+      $rows[]['data'] = $row;
       $row = array();
     }
   }
 
-  return theme('table', array('header' => array(), 'rows' => $rows, 'attributes' => array('class' => array('image-anchor'))));
+  return '<div class="image-anchor">' . theme('table', array('rows' =>  $rows, 'attributes' => array('class' => $element['#default_value']))) . '</div>';
 }
 
 /**
diff --git modules/image/image.js modules/image/image.js
new file mode 100644
index 0000000..ab6c55d
--- /dev/null
+++ modules/image/image.js
@@ -0,0 +1,44 @@
+// $Id:
+(function ($) {
+Drupal.behaviors.imageCropAnchor = {
+  attach: function (context) {
+    $('.image-anchor').addClass('image-crop-widget');
+
+    // Change class of image anchor widget table on click so that the
+    // appropriate background-position is used and toggle the radio button
+    // contained by the clicked td.
+    $('.image-anchor table td').click(function() {
+      var selected = $(this).find('input').val();
+      // Select the radio button contained by this td.
+      $(this).find('input').attr('checked', 'checked');
+
+      // Build a table of which classes to apply to the table depending on
+      // what's been clicked.
+      var classes = {
+        'left-top':      ['selected',  'e', null,  's', 'se', null, null, null, null],
+        'center-top':    [ 'w', 'selected',  'e', 'sw',  's', 'se', null, null, null],
+        'right-top':     [null,  'w', 'selected', null, 'sw',  's', null, null, null],
+        'left-center':   [ 'n', 'ne', null, 'selected',  'e', null,  's', 'se', null],
+        'center-center': ['nw',  'n', 'ne',  'w', 'selected',  'e', 'sw',  's', 'se'],
+        'right-center':  [null, 'nw',  'n', null,  'w', 'selected', null, 'sw',  's'],
+        'left-bottom':   [null, null, null,  'n', 'ne', null, 'selected',  'e', null],
+        'center-bottom': [null, null, null, 'nw',  'n', 'ne',  'w', 'selected',  'e'],
+        'right-bottom':  [null, null, null, null, 'nw',  'n', null,  'w', 'selected']
+      };
+      // Build a helper table to determine which class is at which index. 
+      var mapping = [
+        'left-top', 'center-top', 'right-top',
+        'left-center', 'center-center', 'right-center',
+        'left-bottom', 'center-bottom', 'right-bottom'
+      ];
+      // Assign the classes.
+      for (var key in classes[selected]) {
+        $('.image-anchor td.' + mapping[key]).attr('class', classes[selected][key] ? mapping[key] + ' arrow-' + classes[selected][key] : mapping[key]);
+      }
+    });
+
+    // Set arrows for the currently selected position.
+    $(".image-anchor td:has(input:checked)").click();
+  }
+};
+})(jQuery);