title: JS interactive map: display state names & create links
body: <p>I'm trying to customize this map: <a href="http://jsfiddle.net/allankiezel/FJrNN/" rel="nofollow">http://jsfiddle.net/allankiezel/FJrNN/</a></p>
  
  <p>What I am not able to do is:</p>
  
  <ol>
  <li>Display the name or abbreviation of each state on mouseover</li>
  <li>Link each state to a separate URL (instead of making it green on click)</li>
  </ol>
  
  <p>JS code responsible for map's behavior:</p>
  
  <pre><code>var rsrGroups = [CA, OR, WA, NV, AZ, ID, UT, MT, WY, NM, CO, TX, NE, SD, ND, OK, KS, MN, IA, MO, AR, LA, WI, IL, MS, TN, KY, IN, AL, MI, FL, OH, GA, NC, VA, WV, SC, PA, MD, NJ, DE, VT, MA, CT, NH, ME, RI, NY, AK, HI];
  
  for (var i = 0, len = rsrGroups.length; i &lt;= len; i++) {
  
  var el = rsrGroups[i];
  
  el.mouseover(function() {
      this.toFront();
      this.attr({
          cursor: 'pointer',
          fill: '#990000',
          stroke: '#fff',
          'stroke-width': '2'
      });
      this.animate({
          scale: '1.2'
      }, 200);
  });
  el.mouseout(function() {
      this.animate({
          scale: '1.05'
      }, 200);
      this.attr({
          fill: '#003366'
      });
  });
  el.click(function() {
      this.animate({
          fill: 'green'
      }, 200);
  });
  
  }
  </code></pre>