title: Selecting states an interactive jQuery map
body: <p>In my project I've included an interactive map, similar to this one :<br>
  <a href="http://davidlynch.org/js/maphilight/docs/demo_usa.html" rel="nofollow noreferrer">http://davidlynch.org/js/maphilight/docs/demo_usa.html</a></p>
  
  <pre><code>&lt;div class="event_map" style="display: block; background: url('map.png') repeat scroll 0% 0% transparent; position: relative; padding: 0pt; width: 260px; height:241px;"&gt;
      &lt;canvas width="260" height="241" style="position: absolute; left: 0pt; top: 0pt; padding: 0pt; border: 0pt none; opacity: 1;" id="image" width:260px;height:241px;=""&gt;&lt;/canvas&gt;
      &lt;img style="opacity: 0; position: absolute; left: 0pt; top: 0pt; padding: 0pt; border: 0pt none;" id="image" src="map.png" alt="" class="map" usemap="#state-map" border="0" height="241" width="260"&gt;
  &lt;/div&gt;
  &lt;map name="state-map"&gt;
      &lt;area shape="poly" alt="" title="State Name" coords="74,18,79,17,80,15,85,13,91,13,93" href="/target/link" target="" /&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p>So to get started : what should I use as my selector, the image itself or it's area map? Use 'title', or introduce id's for each area ? </p>