diff --git modules/image/image.admin.css modules/image/image.admin.css
index f5aa597..210cb9e 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(images/cropping-arrows.png) no-repeat -60px 0;
+}
+.image-crop-widget td.arrow-ne {
+  background: url(images/cropping-arrows.png) no-repeat -90px 0;
+}
+.image-crop-widget td.arrow-e {
+  background: url(images/cropping-arrows.png) no-repeat -120px 0;
+}
+.image-crop-widget td.arrow-se {
+  background: url(images/cropping-arrows.png) no-repeat -150px 0;
+}
+.image-crop-widget td.arrow-s {
+  background: url(images/cropping-arrows.png) no-repeat -180px 0;
+}
+.image-crop-widget td.arrow-sw {
+  background: url(images/cropping-arrows.png) no-repeat -210px 0;
+}
+.image-crop-widget td.arrow-w {
+  background: url(images/cropping-arrows.png) no-repeat 0 0;
+}
+.image-crop-widget td.arrow-nw {
+  background: url(images/cropping-arrows.png) no-repeat -30px 0;
 }
diff --git modules/image/image.admin.inc modules/image/image.admin.inc
index 64b17d7..4d5f557 100644
--- modules/image/image.admin.inc
+++ modules/image/image.admin.inc
@@ -492,6 +492,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' => '',
@@ -735,14 +737,14 @@ function theme_image_anchor($element) {
   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;
       $row = array();
     }
   }
 
-  return theme('table', array(), $rows, array('class' => 'image-anchor'));
+  return '<div class="image-anchor">' . theme('table', array(), $rows, array('class' => $element['#default_value'])) . '</div>';
 }
 
 /**
diff --git modules/image/image.js modules/image/image.js
new file mode 100644
index 0000000..cc1761a
--- /dev/null
+++ modules/image/image.js
@@ -0,0 +1,34 @@
+// $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() {
+      set_classes($(this).find('input').val());
+    });
+
+    function set_classes(selected) {
+      var classes = ['left-top', 'center-top', 'right-top', 'left-center', 'center-center', 'right-center', 'left-bottom', 'center-bottom', 'right-bottom'];
+      classes['left-top'] = ['selected', 'e', null, 's', 'se', null, null, null, null];
+      classes['center-top'] = ['w', 'selected', 'e', 'sw', 's', 'se', null, null, null];
+      classes['right-top'] = [null, 'w', 'selected', null, 'sw', 's', null, null, null];
+      classes['left-center'] = ['n', 'ne', null, 'selected', 'e', null, 's', 'se', null];
+      classes['center-center'] = ['nw', 'n', 'ne', 'w', 'selected', 'e', 'sw', 's', 'se'];
+      classes['right-center'] = [null, 'nw', 'n', null, 'w', 'selected', null, 'sw', 's'];
+      classes['left-bottom'] = [null, null, null, 'n', 'ne', null, 'selected', 'e', null];
+      classes['center-bottom'] = [null, null, null, 'nw', 'n', 'ne', 'w', 'selected', 'e'];
+      classes['right-bottom'] = [null, null, null, null, 'nw', 'n', null, 'w', 'selected'];
+
+      for (var key in classes[selected]) {
+        $('.image-anchor td.' + classes[key]).attr('class', '').addClass(classes[key] + ' ' + 'arrow-' + classes[selected][key]);
+      }
+    }
+
+    // Set arrows for the currently selected position.
+    set_classes($(".image-anchor td:has(input:checked)").attr('class'));
+  }
+};
+})(jQuery);