title: Better way to make a overlay-image-map?
body: <p>My objective is to have an image on the screen, and as the user mouses over various polygons they will get a blue-ish overlay over the polygon they are mousing over.</p>
  
  <p>Take this image as an example:</p>
  
  <p><a href="https://i.stack.imgur.com/VKD39.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VKD39.png" alt="enter image description here"></a></p>
  
  <p>I envision writing code like this:</p>
  
  <pre><code>&lt;img src="planets.gif" width="145" height="126" usemap="#polymap"&gt;
  &lt;img id="StarOverlay" src="StarOverlay.png" style="position:absolute;top:30px;left:59px;display:none;"/&gt;
  
  &lt;map name="polymap"&gt;
      &lt;area id="star" shape="poly" coords="0,0,82,126"  alt="Star"&gt;
      &lt;area shape="circle" coords="90,58,3"  alt="Circle"&gt;
      &lt;area shape="Rectangle" coords="124,58,8"  alt="Square"&gt;
      &lt;area shape="Rectangle" coords="124,58,8"  alt="Square"&gt;
  &lt;/map&gt;
  
  $(document).ready(function () {
      $('#star').hover(function () {
          $('#StarOverlay').show();
      }, function () {
          $('#StarOverlay').hide();
      });
  });
  </code></pre>
  
  <p>However, I will need to make very detailed overlays for each and take very special care with the mappings.  I need to do 15 images with over 40 mappings on each one, so this will be very time consuming (I estimate it will take me a month or better).</p>
  
  <p>Is there a better way using say HTML5? or any other HTML features to accomplish this without having to build these maps and image overlays in photoshop?</p>