title: image map/ area coordinate update on resize
body: <p>I'm making a main control page with different links on a image now the only problem is I want the image to fit the whole page and re-size (the window) if they shrink it (to a certain degree) and enlarge it. </p>
  
  <pre><code>&lt;img src ="image/main.jpg" style="width:100%;height:100%; min-width:600px; min-height:400px;" alt="Main" usemap="#MainMap"&gt;
  
  &lt;map name="MainMap"&gt;
  &lt;area id="login" class="login" shape="circle" coords="91,677,92"&gt;
  &lt;area id="money_management" class="money" shape="circle" coords="598,680,92"&gt;
  &lt;area id="withdraw_history" shape="circle" coords="596,304,67"&gt;
  &lt;area id="transaction_history" shape="circle" coords="784,624,67" href="History.html"&gt;
  &lt;area id="cart" shape="circle" coords="396,698,67,92"&gt;
  &lt;area id="buy" shape="circle" coords="898,352,92"&gt;
  &lt;area id="sell" shape="circle" coords="718,438,92"&gt;
  &lt;area id="new" shape="circle" coords="570,132,92" href="New.html"&gt;
  &lt;/map&gt; 
  </code></pre>
  
  <p>I had this before when i made the image static and left it to work on something else, I wanted the coordinates to be updated after they re-size the window I know how to detect re-size in jquery I can't find any syntax example on updating coordinates.</p>