title: Displaying IMAGE Over IMAGE Based On Coordinates
body: <p><img src="https://i.stack.imgur.com/RyAzm.jpg" alt="enter image description here"></p>
  
  <p>i am adding dots on the map one by one based on the css positions which i already added in the arrays.</p>
  
  <pre><code>var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
  var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];
  </code></pre>
  
  <p>but i want to add dots on the map one by one based on the coordinates.</p>
  
  <pre><code>var coordsx =[{'x':'155'},{'x':'338'},{'x':'236'},{'x':'196'},{'x':'171'}];    
  var coordsy =[{'y':'238'},{'y':'328'},{'y':'488'},{'y':'164'},{'y':'439'}];
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sureshpattu/atqJH/2/" rel="nofollow noreferrer"><strong>I tried here</strong></a></p>
  
  <p>my script is here:</p>
  
  <pre><code>var position = 0;
  var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
  var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];
  
  $(postop).each(function(i){
  var dots=$('&lt;img src="http://i.imgur.com/iAfzQ.jpg" /&gt;');
          dots.css('position','absolute');
          dots.offset({ top: postop[position].top, left: posleft[position].left });           
          $("#overlay-dots").append(dots);
          position++;
          i++;
  });​
  </code></pre>