Я же не прошу написать скрипт. Я прошу помочь мне и подправить там, где это нужно.
Если нужны скрипты пожалуйста:
image-crop.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image crop - DHTML user interface</title>
<link rel="stylesheet" href="css/xp-info-pane.css">
<link rel="stylesheet" href="css/image-crop.css">
<script type="text/javascript" src="js/xp-info-pane.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
var crop_script_server_file = 'crop_image.php';
var cropToolBorderWidth = 1; // Width of dotted border around crop rectangle
var smallSquareWidth = 7; // Size of small squares used to resize crop rectangle
// Size of image shown in crop tool
var crop_imageWidth = 600;
var crop_imageHeight = 450;
// Size of original image
var crop_originalImageWidth = 2272;
var crop_originalImageHeight = 1704;
var crop_minimumPercent = 10; // Minimum percent - resize
var crop_maximumPercent = 200; // Maximum percent -resize
var crop_minimumWidthHeight = 15; // Minimum width and height of crop area
var updateFormValuesAsYouDrag = true; // This variable indicates if form values should be updated as we drag. This process could make the script work a little bit slow. That's why this option is set as a variable.
if(!document.all)updateFormValuesAsYouDrag = false; // Enable this feature only in IE
/* End of variables you could modify */
</script>
<script type="text/javascript" src="js/image-crop.js"></script>
</head>
<body>
<div id="pageContent">
<div id="dhtmlgoodies_xpPane">
<div class="dhtmlgoodies_panel">
<div>
<!-- Start content of pane -->
<form>
<input type="hidden" id="input_image_ref" value="demo-images/nature_orig.jpg">
<table>
<tr>
<td>X:</td><td><input type="text" class="textInput" name="crop_x" id="input_crop_x"></td>
</tr>
<tr>
<td>Y:</td><td><input type="text" class="textInput" name="crop_y" id="input_crop_y"></td>
</tr>
<tr>
<td>Width:</td><td><input type="text" class="textInput" name="crop_width" id="input_crop_width"></td>
</tr>
<tr>
<td>Height:</td><td><input type="text" class="textInput" name="crop_height" id="input_crop_height"></td>
</tr>
<tr>
<td>Percent size:</td><td><input type="text" class="textInput" name="crop_percent_size" id="crop_percent_size" value="100"></td>
</TR>
<tr>
<td>Convert to:</td>
<td>
<select class="textInput" id="input_convert_to">
<option value="gif">Gif</option>
<option value="jpg" selected>Jpg</option>
<option value="png">Png</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td id="cropButtonCell"><input type="button" onclick="cropScript_executeCrop(this)" value="Crop">
</td>
</tr>
</table>
<div id="crop_progressBar">
</div>
</form>
<!-- End content -->
</div>
</div>
<div class="dhtmlgoodies_panel">
<div>
<!-- Start content of pane -->
<table>
<tr>
<td><b>Picture from Norway</b></td>
</tr>
<tr>
<td>Dimension: <span id="label_dimension"></span></td>
</tr>
</table>
<!-- End content -->
</div>
</div>
<div class="dhtmlgoodies_panel">
<div>
<!-- Start content of pane -->
To select crop area, drag and move the dotted rectangle or type in values directly into the form.
<!-- End of content -->
</div>
</div>
</div>
<div class="crop_content">
<div id="imageContainer">
<img src="demo-images/nature.jpg">
</div>
</div>
</div>
<script type="text/javascript">
initDhtmlgoodies_xpPane(Array('Crop inspector','Image details','Instructions'),Array(true,true),Array('pane1','pane2','pane3'));
init_imageCrop();
</script>
</body>
</html>