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?...