title: How to create an image with "hoverable" areas that show additional information in jQuery or HTML5
body: <p>I'm trying to create something which I feel should be simple to do in jQuery or HTML5, but am having a tough time finding the resources for it. If anyone can help, it would be much appreciated.</p>
  
  <p>Goal-
  I've got a single image with 16 sections that are hoverable. There are other parts of this image, that are completely static. If a user hovers over one of the predefined areas, I would like for a thumbnail and title to pop up over the image. This is a static page and no content needs to be dynamic. </p>
  
  <p>Right now the entire image is a PNG, but it was saved out from a vector image, so I could convert the areas to SVGs if preferred. Ideally, I could keep it as a single image as this would be useful for a wider variety of projects.</p>
  
  <p>I'm ok with doing it in HTML5 or jQuery.</p>
  
  <p>Does a solution for this already exist? I feel like it must. Any additional questions?</p>
  
  <p>I'm already aware of this and plan to use something similar to this as a backup plan - <a href="http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map" rel="nofollow noreferrer">http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map</a></p>