/    Sign up×
Community /Pin to ProfileBookmark

Image Map Click-to-get an array of coordinates with or without jQuery

Copy linkTweet thisAlerts:
Dec 18.2012

With or without jQuery… I need a clicker to get multiple coordinates from an image and put them together in the same line…

Ok, so I’m setting up a new CMS for my office and the one thing I can’t seem to figure out how to do is making a coordinate-fetcher for the community maps we use. I want to be able to click on each corner (whether “4” corners or “50” corners, it shouldn’t matter) and have it build an array of coordinate points from the image and collect them in a nice easy-to-use form element…

What I need is something that will allow me to select the coordinates and stick it into a text line that I could then submit to the database. Probable like 3,14;12,36;19,40 etc… with symbols separating the sets of coordinates so that I can split it and put it into the database correctly with my PHP code.

What we currently have is an integrated version of this: [url]http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/[/url]

So ideally, if we could modify that somehow to create an array of coordinates for the perimeter of a lot instead of just finding the center point, that would be awesome.

[I][B]Any ideas[/B][/I] would be greatly appreciated. Thanks!

My “back-up option” would be to just have it go through and repeat the page again-and-again and add the coordinates every time they click one, but that’s too time-consuming for my end-user and very difficult to edit after the fact without starting over. ?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsDec 19.2012 — [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>
</head>

<body>
<img id="tst" src="http://www.emanueleferonato.com/images/sun.jpg" />
<input type="button" name="" value="Start" onmousedown="zxcMapCoords.Start('tst');" />
<input type="button" name="" value="Done" onmousedown="zxcMapCoords.Done('tst');" />
<br />
<textarea id="tstcoords" rows=10 cols=100 ></textarea>

<script type="text/javascript">

var zxcMapCoords={

init:function(img,op){
var id=img,img=document.getElementById(id),o;
o=zxcMapCoords['zxc'+id]={
id:id,
img:img,
op:document.getElementById(op),
ary:[],
temp:[],
srt:false
}
this.addevt(img,'mousedown','down',o);
},

Start:function(id){
var o=zxcMapCoords['zxc'+id];
if (o){
o.srt=true;
o.op.value='';
o.temp=[];
}
},

Done:function(id){
var o=zxcMapCoords['zxc'+id];
if (o&&o.srt){
o.srt=false;
if (o.temp.length>4){
o.ary.push(o.temp);
o.op.value=o.ary.join('n');
o.temp=[];
}
}
},

down:function(e,o){
if (o.srt){
var mse=this.mse(e),p=this.pos(o.img);
o.temp.push(mse[0]-p[0]);
o.temp.push(mse[1]-p[1]);
o.op.value=o.temp;
}
},

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


}

zxcMapCoords.init('tst','tstcoords');

</script>

</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@vwphillipsDec 19.2012 — [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[*/
.dot {
position:absolute;width:1px;height:1px;background-Color:white;
}

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

<body>
<img id="tst" src="http://www.emanueleferonato.com/images/sun.jpg" />
<input type="button" name="" value="Start" onmousedown="zxcMapCoords.Start('tst');" />
<input type="button" name="" value="Done" onmousedown="zxcMapCoords.Done('tst');" />
<br />
<script type="text/javascript">

var zxcMapCoords={

init:function(o){
var id=o.ImageID,cls=o.DotClass,img=document.getElementById(id),d=document.createElement('DIV'),o;
d.style.position='absolute';
d.style.zIndex='101';
d.style.left='0px';
d.style.top='0px';
d.style.width='0px';
d.style.height='0px';
document.body.appendChild(d);
o=zxcMapCoords['zxc'+id]={
id:id,
img:img,
op:document.getElementById(o.DisplayID),
div:d,
cd:d.cloneNode(false),
c:document.createElement('DIV'),
ary:[],
temp:[],
lines:[],
srt:false
}
o.c.className=cls;
this.addevt(img,'mousedown','down',o);
},

Start:function(id){
var o=zxcMapCoords['zxc'+id];
if (o){
o.srt=true;
o.cnt=o.ary.length;
o.lines[o.cnt]=o.cd.cloneNode(false);
o.div.appendChild(o.lines[o.cnt]);
o.op.value='';
o.temp=[];
}
},

Done:function(id){
var o=zxcMapCoords['zxc'+id];
if (o&&o.srt){
o.srt=false;
if (o.temp.length>0){
cd=o.cd.cloneNode(false);
o.lines[o.cnt].appendChild(cd);
this.line(o,cd,[o.temp[0],o.temp[o.temp.length-1]]);
o.ary.push(o.temp);
o.op.value=o.ary.join('n');
o.temp=[];
}
}
},

Clear:function(id){
var o=zxcMapCoords['zxc'+id];
if (o){
o.srt=false;
o.ary=[];
o.op.value='';
o.temp=[];
}
},

down:function(e,o){
if (o.srt){
var mse=this.mse(e),p=this.pos(o.img),lgth,cd;
o.div.style.left=p[0]+'px';
o.div.style.top=p[1]+'px';
o.temp.push([mse[0]-p[0],mse[1]-p[1]]);
lgth=o.temp.length;
if (lgth>1){
cd=o.cd.cloneNode(false);
o.lines[o.cnt].appendChild(cd);
this.line(o,cd,[o.temp[lgth-2],o.temp[lgth-1]]);
}
o.op.value=o.temp;
}
},

line:function(o,cd,sf){
var sf=sf.sort(function(a,b){ return a[0]-b[0]; }),s=sf[0],f=sf[1],w=f[0]-s[0],h=f[1]-s[1],hyp=Math.sqrt(w*w+h*h),d,z0=0;
for (;z0<hyp;z0++){
d=o.c.cloneNode(false);
d.style.left=Math.round(s[0]+w*z0/hyp)+'px';
d.style.top=Math.round(s[1]+h*z0/hyp)+'px';
cd.appendChild(d);
}
},

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


}

zxcMapCoords.init({
ImageID:'tst',
DisplayID:'tstcoords',
DotClass:'dot'
});

</script>

</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@vwphillipsDec 19.2012 — [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[*/
.dot {
position:absolute;width:1px;height:1px;background-Color:white;
}

.text {
position:absolute;width:100px;color:white;font-Size:10px;
}

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

<body>
<div class="text" >Area 0</div>

<img id="tst" src="http://www.emanueleferonato.com/images/sun.jpg" />
<input type="button" name="" value="Start" onmousedown="zxcMapCoords.Start('tst');" />
<input type="button" name="" value="Back" onmousedown="zxcMapCoords.Back('tst');" />
<input type="button" name="" value="Done" onmousedown="zxcMapCoords.Done('tst');" />
<br />
<textarea id="tstcoords" rows=10 cols=100 ></textarea>
<br />
<select id="tstselect" onchange="zxcMapCoords.RemoveArea('tst',this.value);" >
<option>Remove Area</option>
</select>
<script type="text/javascript">
// Image Map Coordinates. (19-December-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/



var zxcMapCoords={

init:function(o){
var id=o.ImageID,cls=o.DotClass,tcls=o.TextClass,img=document.getElementById(id),d=document.createElement('DIV'),o;
d.style.position='absolute';
d.style.zIndex='101';
d.style.left='0px';
d.style.top='0px';
d.style.width='0px';
d.style.height='0px';
document.body.appendChild(d);
o=zxcMapCoords['zxc'+id]={
id:id,
img:img,
op:document.getElementById(o.DisplayID),
sel:document.getElementById(o.SelectID),
div:d,
cd:d.cloneNode(false),
c:document.createElement('DIV'),
t:typeof(tcls)=='string'?document.createElement('DIV'):false,
cdary:[],
areas:[],
txt:[],
temp:[],
lines:[],
srt:false
}
d.style.width=img.width+'px';
d.style.height=img.height+'px';
o.c.className=cls;
o.t.className=tcls;
this.addevt(img,'mousedown','down',o);
},

Start:function(id){
var o=zxcMapCoords['zxc'+id];
if (o&&o.srt==false){
o.srt=true;
o.cnt=o.areas.length;
o.lines[o.cnt]=o.cd.cloneNode(false);
o.div.appendChild(o.lines[o.cnt]);
o.op.value='';
o.temp=[];
}
},

Back:function(id){
var o=zxcMapCoords['zxc'+id];
if (o&&o.temp.length){
if (o.cdary[o.temp.length-2]){
o.lines[o.cnt].removeChild(o.cdary[o.temp.length-2]);
o.cdary.length--;
}
o.temp.length--;
o.op.value=o.temp;
}
},

Done:function(id){
var o=zxcMapCoords['zxc'+id],c,mx=1000,my=1000,txt,z0;
if (o&&o.srt){
o.srt=false;
if (o.temp.length>0){
cd=o.cd.cloneNode(false);
o.lines[o.cnt].appendChild(cd);
this.line(o,cd,[o.temp[0],o.temp[o.temp.length-1]]);
o.areas.push(o.temp);
o.op.value=o.areas.join('n');
c=o.areas[o.cnt];
for (var z0=0;z0<c.length;z0++){
mx=Math.min(mx,c[z0][0]);
my=Math.min(my,c[z0][1]);
}
if (o.t){
txt=o.t.cloneNode(false);
txt.style.left=mx+'px';
txt.style.top=my+'px';
o.lines[o.cnt].appendChild(txt);
txt.innerHTML='Area '+o.cnt;
o.txt[o.cnt]=txt;
}
o.temp=[];
this.select(o);
}
}
},

RemoveArea:function(id,nu){
var o=zxcMapCoords['zxc'+id],z0=0;
if (o&&o.srt==false&&o.areas[nu]){
o.areas.splice(nu,1);
o.div.removeChild(o.lines[nu]);
o.lines.splice(nu,1);
o.txt.splice(nu,1);
for (;z0<o.txt.length;z0++){
o.txt[z0].innerHTML='Area '+z0;
}
o.cnt--;
this.select(o);
}
},

select:function(o){
if (o.sel){
o.sel.options.length-1;
for (var z0=0;z0<o.areas.length;z0++){
o.sel.options[z0+1]=new Option('Area '+z0,z0);
}
}
o.sel.selectedIndex=0;
o.op.value=o.areas.join('n');
},

down:function(e,o){
if (o.srt){
var mse=this.mse(e),p=this.pos(o.img),lgth,cd;
o.div.style.left=p[0]+'px';
o.div.style.top=p[1]+'px';
o.temp.push([mse[0]-p[0],mse[1]-p[1]]);
lgth=o.temp.length;
if (lgth>1){
cd=o.cd.cloneNode(false);
o.lines[o.cnt].appendChild(cd);
o.cdary[o.cnt]=cd;
this.line(o,cd,[o.temp[lgth-2],o.temp[lgth-1]]);
}
o.op.value=o.temp;
}
},

line:function(o,cd,sf){
var sf=sf.sort(function(a,b){ return a[0]-b[0]; }),s=sf[0],f=sf[1],w=f[0]-s[0],h=f[1]-s[1],hyp=Math.sqrt(w*w+h*h),d,z0=0;
for (;z0<hyp;z0++){
d=o.c.cloneNode(false);
d.style.left=Math.round(s[0]+w*z0/hyp)+'px';
d.style.top=Math.round(s[1]+h*z0/hyp)+'px';
cd.appendChild(d);
}
},

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


}

zxcMapCoords.init({
ImageID:'tst', // the unique ID name of the image. (string)
DisplayID:'tstcoords', // the unique ID name of TEXT AREA to display the area coordinates. (string)
DotClass:'dot', // the class name of the dot elements of the lines. (string)
SelectID:'tstselect', //(optional) the unique ID name of the SELECT element to manage the areas. (string, default = in line event calls to fumction 'RrmoveArea'))
TextClass:'text' //(optional) the class name of DIV element to display the area number. (string)
});

</script>

</body>

</html>[/CODE]
×

Success!

Help @amandaNHT spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...