jcrop-0.9.8/build/demos/basic-handler/content.html

Jcrop Javascript Image Cropper

  <!-- This is the image we're attaching Jcrop to -->
  <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />

  <!-- This is the form that our event handler fills -->
  <form id="coords"
    class="coords"
    onsubmit="return false;"
    action="http://example.com/post.php">

    <div class="inline-labels">
    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
    <label>W <input type="text" size="4" id="w" name="w" /></label>
    <label>H <input type="text" size="4" id="h" name="h" /></label>
    </div>
  </form>

  <div class="description">
  <p>
    <b>An example with a basic event handler.</b> Here we've tied
    several form values together with a simple event handler invocation.
    The result is that the form values are updated in real-time as
    the selection is changed using Jcrop's <em>onChange</em> handler.
  </p>

  <p>
    That's how easily Jcrop can be integrated into a traditional web form!
  </p>
  </div>