Ayuda con código para recortar imagen dinamicamente.

[gepd]

Hola amigos de foros del web, primero que todo les agradezco su ayuda desde ya, mi problema es el siguiente.

Tengo éste code:

en ésto es donde coloco la imagen para colocar el rectangulo y decidir que seccion cortar.

Código PHP:

  <div class="contenedor"   
onclick="posicionaMarco(event)"  
onmousemove="despliegaMarco(event)">  
<img src="foto.jpg" alt="Foto" />  
<span id="marco"></span>  
</div>  
   

en éste otro procesa als dos funciones para poder desplegar el rectangulo.

Código PHP:

     1. var _IE_ = navigator.userAgent.indexOf("MSIE") != -1; // Si es IE  
   2. var inicio = false;  
   3. var xini = 0;  
   4. var yini = 0;  
   5. var xfin = 0;  
   6. var yfin = 0;  
   7.   
   8. function posicionaMarco(e) {  
   9.   inicio = !inicio;  
  10.   var marco = document.getElementById("marco");  
  11.     
  12.   if (inicio) {  
  13. marco.style.display = "block";  
  14.   
  15. // En IE y Opera se usa otra propiedad del evento  
  16. if (_IE_) {  
  17.   xini = e.offsetX;  
  18.   yini = e.offsetY;  
  19. } else {  
  20.   xini = e.layerX;  
  21.   yini = e.layerY;  
  22. }  
  23. marco.style.left = xini+"px";  
  24. marco.style.top = yini+"px";  
  25. marco.style.width = "0px";  
  26. marco.style.height = "0px";  
  27.   }   
  28. }  
   

mi problema es que con éste code yo hago un clic y luego arrastro ys e va creando el rectangulo según las dimensiones que yo le de, pero yo desearía que el rectangulo tuviera una dimension ya definida y que se pudiese mover por cualquier parte de la imagen, cosa que he estado probando y no he podido lograr


desde ya agradezco su ayuda..

saludos

[gepd]

nadie sabe como hacerlo? ninguna pista?...