www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    Apr 2011
    Location
    Seattle, WA
    Posts
    264

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

    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: http://www.emanueleferonato.com/2006...th-javascript/

    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.

    Any ideas 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.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,661
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,661
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,661
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles