Caricatos!
Aquí tienes un ejemplo de lo que sería un comienzo de lo que sería la redimensión de la imagen. Falta corregir algún defecto, como la compatibilidad con Nescafé, pero funciona con IE. Dime si tienes alguna duda.
<html>
<head>
<title>Mover y redimensionar</title>
<script>
var mover=0;
var xx
var yy
var x
var y
var objeto
var agranda=false;
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorX, coorY, iniX, iniY;
if (ns6) document.addEventListener("localizar", inicio, true)
if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}
function buscaraton(){
if (ie4){
xx=event.x;
yy=event.y;
}
if (ns4||ns6){
xx=this.pageX;
yy=this.pageY;
}
}
function agrandar(capa2){
capa=eval("document.getElementById('"+capa2+"')");
if (agranda){
capa.style.border="dotted 1px black";
posicionx=parseInt(capa.style.left);
posiciony=parseInt(capa.style.top);
buscaraton();
yyy=yy-posiciony+2;
xxx=xx-posicionx+2;
if(xxx<10)xxx=10;
if(yyy<10)yyy=10;
capa.style.height=yyy
capa.style.width=xxx
}
else{capa.style.border="none";}
}
function inicio(objeto){
objeto.style.cursor="move";
objeto.style.border="dotted 1px black";
mover=1;
localizar(objeto);
}
function localizar(objeto1){
arriba=parseInt(objeto1.style.top);
izquierda=parseInt(objeto1.style.left);
if (ie4){
x=event.x-izquierda;
y=event.y-arriba;
}
if (ns4||ns6){
x=objeto1.pageX;
y=objeto1.pageY;
}
}
function arrastrar(objeto){
if(mover==1){
buscaraton();
objeto.style.posTop=yy-y;
objeto.style.posLeft=xx-x;
}
xxx=xx-x;
yyy=yy-y;
localizar(objeto);}
</script>
</head>
<body>
<div id="cuadro"
onMouseDown="inicio(this);"
onMouseOut="this.style.cursor='';this.style.border ='none'"
onMouseUp="this.style.cursor='';mover=0;this.style .border='none';"
onMouseMove="arrastrar(this);"
style="
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;">
<img style="position:absolute;top:0px;left:0px;" src="bull dog.jpg" width="100%" height="100%">
<div id="pepe"
onclick="agranda=(agranda==false)? true:false;agrandar('cuadro')"
onMouseMove="agrandar('cuadro');"
onMouseOut="agrandar('cuadro')"
style=" position:absolute;
width:10px;
height:10px;
background:silver;
overflow:hidden;
bottom:0px;
right:0px;
z-index:999;
cursor:se-resize;
">
</div>
</div>
</body>
</html>
No me he parado a intentar implantarlo en la página... si tuviera algo de tiempo lo haría pero estoy un poco liado...
Espero que sirva. Si quieres que haga algo más dímelo por favor.
Saludos!!