Draw Rectangle

**BrooksyFC** · 05-23-2012, 10:59 AM

Hello all,

We have a map where you can search data and it appears on the map.

What I would like to do with it is have a javascript code to drag a rectangle over an image, and somehow feed the co-ordinates into an html form.

Thats what I've been told to do so if anyone has any ideas I will really appreciate them

Thanks in advance

**vwphillips** · 05-23-2012, 03:24 PM

starter for 10

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
 .window1 {
   z-Index:101;width:80px;height:60px;border:solid #FFCC66 1px;cursor:crosshair;
 }


/*]]>*/
</style></head>

<body>
<center>
 <input id="xip" /> <input id="yip" />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
</center>

<script type="text/javascript">
/*<![CDATA[*/
// Image Window (23-May-2012)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcImageWindow={

 init:function(o){
  var img=document.getElementById(o.ImageID),win=document.createElement('DIV'),obj;
  win.className=o.WindowClass;
  win.style.position='absolute';
  win.style.left='-3000px';
  win.style.top='-3000px';
  document.body.appendChild(win);
  obj={
   img:img,
   win:win,
   osx:this.svalue(win,'width')/2,
   osy:this.svalue(win,'height')/2,
   xip:document.getElementById(o.XInputID),
   yip:document.getElementById(o.YInputID)
  }
  this.addevt(document,'mousemove','pan',obj);
 },

 pan:function(e,o){
  clearTimeout(o.to);
  var mse=this.mse(e),p=this.pos(o.img);
  if (mse[0]>=p[0]&&mse[0]<=p[0]+o.img.width&&mse[1]>=p[1]&&mse[1]<=p[1]+o.img.height){
   o.win.style.left=mse[0]-o.osx+'px';
   o.win.style.top=mse[1]-o.osy+'px';
   if (o.xip){
    o.xip.value=mse[0]-p[0];
   }
   if (o.yip){
    o.yip.value=mse[1]-p[1];
   }
  }
  else {
   o.win.style.left='-3000px';
  }
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },


 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 },

 svalue:function(obj,par){
  if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
  return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
 }

}

zxcImageWindow.init({
 ImageID:'tst',
 WindowClass:'window1',
 XInputID:'xip',
 YInputID:'yip'
});
/*]]>*/
</script>
</body>

</html>

**BrooksyFC** · 05-28-2012, 11:43 AM

Thats great just what I want.

But there are a few things I need changing though or adding.

Have it so you left click on the image, keep it held and drag a box shape.

When it's released the box stays on the image. And when you click on that box you can drag it around the page.

Something like that maybe?

**vwphillips** · 05-28-2012, 01:18 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
 .window1 {
   z-Index:101;width:80px;height:60px;border:solid #FFCC66 1px;cursor:crosshair;
 }


/*]]>*/
</style></head>

<body>
<center>
 <input id="xip" /> <input id="yip" />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
</center>

<script type="text/javascript">
/*<![CDATA[*/
// Image Window (28-May-2012)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcImageWindow={

 init:function(o){
  var img=document.getElementById(o.ImageID),win=document.createElement('DIV'),obj;
  win.className=o.WindowClass;
  win.style.position='absolute';
  win.style.overflow='hidden';
  win.style.left='-3000px';
  win.style.top='-3000px';
  document.body.appendChild(win);
  obj={
   img:img,
   win:win,
   drag:null,
   osx:this.svalue(win,'width')/2,
   osy:this.svalue(win,'height')/2,
   xip:document.getElementById(o.XInputID),
   yip:document.getElementById(o.YInputID)
  }
  this.addevt(document,'mousemove','pan',obj);
  this.addevt(document,'mouseup','up',obj);
  this.addevt(img,'mousedown','down',obj);
 },

 pan:function(e,o){
  clearTimeout(o.to);
  var mse=this.mse(e),p=this.pos(o.img);
  if (mse[0]>=p[0]&&mse[0]<=p[0]+o.img.width&&mse[1]>=p[1]&&mse[1]<=p[1]+o.img.height){
   if (o.drag){
    o.win.style.left=mse[0]-o.osx+'px';
    o.win.style.top=mse[1]-o.osy+'px';
    if (o.xip){
     o.xip.value=mse[0]-p[0];
    }
    if (o.yip){
     o.yip.value=mse[1]-p[1];
    }
   }
  }
  else if (o.drag===false) {
   o.win.style.left=mse[0]-o.osx+'px';
   o.win.style.top=mse[1]-o.osy+'px';
  }
  return this.dragrtn(e);
 },

 dragrtn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 down:function(e,o){
  o.drag=true;
  return this.dragrtn(e);
 },

 up:function(e,o){
  if (o.drag===true){
   o.drag=false;
  }
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },


 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 },

 svalue:function(obj,par){
  if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
  return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
 }

}

zxcImageWindow.init({
 ImageID:'tst',
 WindowClass:'window1',
 XInputID:'xip',
 YInputID:'yip'
});
/*]]>*/
</script>
</body>

</html>

**BrooksyFC** · 05-28-2012, 01:59 PM

Thats cool thanks,

I don't wana keep adding to it, but is there a way to resize the box? Like drag the sides?

**vwphillips** · 05-28-2012, 03:26 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
 .window1 {
   z-Index:101;width:80px;height:60px;border:solid #FFCC66 1px;cursor:crosshair;
 }


 .handle {
   z-Index:101;left:0px;top:0px;width:5px;height:5px;background-Color:#FFCC66;cursor:crosshair;
 }

/*]]>*/
</style></head>

<body>
<center>
 <input id="xip" /> <input id="yip" />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
</center>

<script type="text/javascript">
/*<![CDATA[*/
// Image Window (28-May-2012)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcImageWindow={

 init:function(o){
  var img=document.getElementById(o.ImageID),win=document.createElement('DIV'),h=false,obj;
  win.className=o.WindowClass;
  win.style.position='absolute';
  win.style.overflow='hidden';
  win.style.left='-3000px';
  win.style.top='-3000px';
  document.body.appendChild(win);
  if (o.HandleClass){
   h=win.cloneNode(false);
   h.className=o.HandleClass;
   win.appendChild(h);
   h.style.left=this.int(win,'width')-this.int(h,'width')+'px';
   h.style.top=this.int(win,'height')-this.int(h,'height')+'px';
   this.addevt(h,'mousedown','resize',obj);
  }
  obj={
   img:img,
   win:win,
   drag:null,
   mse:false,
   h:h,
   osx:this.svalue(win,'width')/2,
   osy:this.svalue(win,'height')/2,
   xip:document.getElementById(o.XInputID),
   yip:document.getElementById(o.YInputID)
  }
  this.addevt(document,'mousemove','pan',obj);
  this.addevt(document,'mouseup','up',obj);
  this.addevt(img,'mousedown','down',obj);
 },

 resize:function(e,o){
  o.mse=this.mse(e);
 },

 resizedo:function(mse,o){
  if (o.mse){
   o.win.style.width=Math.max(this.int(o.win,'width')+mse[0]-o.mse[0],10)+'px';
   o.win.style.height=Math.max(this.int(o.win,'height')+mse[1]-o.mse[1],10)+'px';
   o.h.style.left=this.int(o.win,'width')-this.int(o.h,'width')+'px';
   o.h.style.top=this.int(o.win,'height')-this.int(o.h,'height')+'px';
   o.mse=mse;
  }
 },

 int:function(o,p){
  return parseInt(this.style(o,p));
 },

 style:function(o,p){
  if (o.currentStyle){
   return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
 },

 pan:function(e,o){
  clearTimeout(o.to);
  var mse=this.mse(e),p=this.pos(o.img);
  this.resizedo(mse,o);
  if (mse[0]>=p[0]&&mse[0]<=p[0]+o.img.width&&mse[1]>=p[1]&&mse[1]<=p[1]+o.img.height){
   if (o.drag){
    o.win.style.left=mse[0]-o.osx+'px';
    o.win.style.top=mse[1]-o.osy+'px';
    if (o.xip){
     o.xip.value=mse[0]-p[0];
    }
    if (o.yip){
     o.yip.value=mse[1]-p[1];
    }
   }
  }
  else if (o.drag===false) {
   o.win.style.left=mse[0]-o.osx+'px';
   o.win.style.top=mse[1]-o.osy+'px';
  }
  return this.dragrtn(e);
 },

 dragrtn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 down:function(e,o){
  o.drag=true;
  return this.dragrtn(e);
 },

 up:function(e,o){
  if (o.drag===true){
   o.drag=false;
  }
  if (o.mse){
   o.mse=false;
  }
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },


 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 },

 svalue:function(obj,par){
  if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
  return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
 }

}

zxcImageWindow.init({
 ImageID:'tst',
 WindowClass:'window1',
 HandleClass:'handle',
 XInputID:'xip',
 YInputID:'yip'
});
/*]]>*/
</script>
</body>

</html>

**BrooksyFC** · 05-29-2012, 07:53 AM

Thanks again

Does this work in all browsers? Cause it doesn't seem to be working in Chrome?

**vwphillips** · 05-29-2012, 09:18 AM

oops

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
 .window1 {
   z-Index:101;width:80px;height:60px;border:solid #FFCC66 1px;cursor:crosshair;
 }


 .handle {
   z-Index:101;left:0px;top:0px;width:5px;height:5px;background-Color:#FFCC66;cursor:crosshair;
 }

/*]]>*/
</style></head>

<body>
<center>
 <input id="xip" /> <input id="yip" />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
</center>

<script type="text/javascript">
/*<![CDATA[*/
// Image Window (28-May-2012)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcImageWindow={

 init:function(o){
  var img=document.getElementById(o.ImageID),win=document.createElement('DIV'),h=false,obj;
  win.className=o.WindowClass;
  win.style.position='absolute';
  win.style.overflow='hidden';
  win.style.left='-3000px';
  win.style.top='-3000px';
  document.body.appendChild(win);
  if (o.HandleClass){
   h=win.cloneNode(false);
   h.className=o.HandleClass;
   win.appendChild(h);
   h.style.left=this.int(win,'width')-this.int(h,'width')+'px';
   h.style.top=this.int(win,'height')-this.int(h,'height')+'px';
  }
  obj={
   img:img,
   win:win,
   drag:null,
   mse:false,
   h:h,
   osx:this.svalue(win,'width')/2,
   osy:this.svalue(win,'height')/2,
   xip:document.getElementById(o.XInputID),
   yip:document.getElementById(o.YInputID)
  }
  this.addevt(document,'mousemove','pan',obj);
  this.addevt(document,'mouseup','up',obj);
  this.addevt(img,'mousedown','down',obj);
  if (h){
   this.addevt(h,'mousedown','resize',obj);
  }
 },

 resize:function(e,o){
  o.mse=this.mse(e);
 },

 resizedo:function(mse,o){
  if (o.mse){
   o.win.style.width=Math.max(this.int(o.win,'width')+mse[0]-o.mse[0],10)+'px';
   o.win.style.height=Math.max(this.int(o.win,'height')+mse[1]-o.mse[1],10)+'px';
   o.h.style.left=this.int(o.win,'width')-this.int(o.h,'width')+'px';
   o.h.style.top=this.int(o.win,'height')-this.int(o.h,'height')+'px';
   o.mse=mse;
  }
 },

 int:function(o,p){
  return parseInt(this.style(o,p));
 },

 style:function(o,p){
  if (o.currentStyle){
   return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
 },

 pan:function(e,o){
  clearTimeout(o.to);
  var mse=this.mse(e),p=this.pos(o.img);
  this.resizedo(mse,o);
  if (mse[0]>=p[0]&&mse[0]<=p[0]+o.img.width&&mse[1]>=p[1]&&mse[1]<=p[1]+o.img.height){
   if (o.drag){
    o.win.style.left=mse[0]-o.osx+'px';
    o.win.style.top=mse[1]-o.osy+'px';
    if (o.xip){
     o.xip.value=mse[0]-p[0];
    }
    if (o.yip){
     o.yip.value=mse[1]-p[1];
    }
   }
  }
  else if (o.drag===false) {
   o.win.style.left=mse[0]-o.osx+'px';
   o.win.style.top=mse[1]-o.osy+'px';
  }
  return this.dragrtn(e);
 },

 dragrtn:function(e){
  if(e.stopPropagation){
   e.stopPropagation();
  }
  if (!window.event){
   e.preventDefault();
  }
  e.cancelBubble=true;
  e.cancel=true;
  e.returnValue=false;
  return false;
 },

 down:function(e,o){
  o.drag=true;
  return this.dragrtn(e);
 },

 up:function(e,o){
  if (o.drag===true){
   o.drag=false;
  }
  if (o.mse){
   o.mse=false;
  }
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },


 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 },

 svalue:function(obj,par){
  if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
  return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
 }

}

zxcImageWindow.init({
 ImageID:'tst',
 WindowClass:'window1',
 HandleClass:'handle',
 XInputID:'xip',
 YInputID:'yip'
});
/*]]>*/
</script>
</body>

</html>

**BrooksyFC** · 05-29-2012, 09:46 AM

Still doesn't seem to work for me. I can move the box around, but sometimes it gets stuck and a bit glitched. And I can't re-size the box either.

Not sure :/