title: Image Area Map at multiple resolutions i.e. hotspots in x y coordinates
body: <p>I'm using an Area Map over my image to allow users to select points which perform various JavaScript functions.</p>
  
  <p>The coordinates of the shapes are hard coded into the html page as this allows my script to work on various pages. Unfortunately I now need to have the page work at various resolutions, which also requires that the picture scale as a percentage of the parent Div (no work around on this, customer requirement).</p>
  
  <p>As area maps uses coordinates and percentages aren't yet supported I was wondering what the best approach to this should be? </p>
  
  <p>The only options I can think of are:</p>
  
  <ol>
  <li>Create Div's for each point based on the html and % place them</li>
  <li>Pass the coordinates into the JavaScript and work out their % based on the current screen size, then convert them back into coordinates.</li>
  <li>Ask the inter webs and pray somebody has encountered this and found a genius solution :)</li>
  </ol>