PDA

View Full Version : 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


<!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
<!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
<!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


<!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 :/

BrooksyFC
05-29-2012, 10:42 AM
Ah I see, you have to press move buttons to move it.

vwphillips
05-29-2012, 10:47 AM
http://www.vicsjavascripts.org.uk/Demos/120528A.htm

BrooksyFC
05-29-2012, 11:03 AM
oh it does work with the left click haha. Thanks again for your help :)

BrooksyFC
05-29-2012, 02:11 PM
Do you know if there is a way have to it so that when the box has been resized to the users size, you can click and hold anywhere on the box to move it. Cause at the mo, you have to click on a random spot on the map.

vwphillips
05-30-2012, 11:45 AM
off the image click the window to turn drag on/off


<!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 (29-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:null,
h:h,
mve:false,
xip:document.getElementById(o.XInputID),
yip:document.getElementById(o.YInputID)
}
this.addevt(document,'mousemove','pan',obj);
this.addevt(document,'mouseup','up',obj);
this.addevt(document,'mousedown','down',obj);
if (h){
this.addevt(h,'mousedown','resize',obj);
}
},

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

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),osx=this.int(o.win,'width')/2,osy=this.int(o.win,'height')/2;
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.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';
if (o.mse!=null){
o.mve=true;
}
o.mse=mse;
}
if (o.drag){
o.win.style.left=mse[0]-osx+'px';
o.win.style.top=mse[1]-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.mve) {
o.win.style.left=mse[0]-osx+'px';
o.win.style.top=mse[1]-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){
var mse=this.mse(e),p=this.pos(o.img),osx=this.int(o.win,'width')/2,osy=this.int(o.win,'height')/2;
if (mse[0]>=p[0]&&mse[0]<=p[0]+o.img.width&&mse[1]>=p[1]&&mse[1]<=p[1]+o.img.height){
o.drag=true;
return this.dragrtn(e);
}
else if (o.mse!=null){
p=this.pos(o.win);
if (mse[0]>=p[0]&&mse[0]<=p[0]+o.win.offsetWidth&&mse[1]>=p[1]&&mse[1]<=p[1]+o.win.offsetHeight){
o.mve=!o.mve;
}
}
},

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); });
}

}

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

</html>

BrooksyFC
05-30-2012, 02:53 PM
That is fantastic, thank you so much for this.

BrooksyFC
05-30-2012, 02:59 PM
Just a quick questions, where did you learn to do all this? Cause I really wana learn more about Javascript

BrooksyFC
06-13-2012, 08:45 AM
When I move my mouse off the image, it takes the box with it. Is there a way to stop that? Like a border restriction or something?