title: How to detect image link coordinate?
body: <p>I have a  question about position the div in a image map link</p>
  
  <p>I have a image that contains multiple links</p>
  
  <p>I want to position a single div on top of the image link. </p>
  
  <pre><code>&lt;img id='project' src='test.png' USEMAP = '#test1'/&gt;
  
  &lt;map name='test1'&gt;
      &lt;area class='btn' shape="rect" coords="36,20,55,34" href="#"/&gt;
      &lt;area class='btn' shape="rect" coords="18,37,35,56" href="#"/&gt;
      &lt;area class='btn' shape="rect" coords="54,38,72,56" href="#"/&gt;
      &lt;area class='btn' shape="rect" coords="31,61,57,75" href="#"/&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p>How do I find the right coordinate on the map and place a div on top of it? </p>
  
  <p>Thanks a lot!</p>