title: Using jQuery to change image map coord values
body: <p>I have a pretty complex image map that I would like to shrink by half. To do so would require dividing all the coord values by 2. Since there are thousands of coord values, I was thinking that I could use jQuery to traverse the DOM to find the coord values, and divide them by two. I'm pretty amateur when it comes to JavaScript and jQuery and I wrote the following code that doesn't work to accomplish my task: </p>
  
  <pre><code>$(function(){
      $('area').each(function(){
          coord_vals= $('area'[coords]).split(',');
          new_vals= coord_vals/2;
          $('area'[coords]).val(new_vals + ',');
      });
  });
  </code></pre>
  
  <p>Here's the first few lines of HTML I'm trying to traverse:</p>
  
  <pre><code>&lt;div id="map"&gt;
      &lt;img class="map" src="images/us_map.jpg" width="960" height="593" usemap="#usa"&gt;
      &lt;map name="usa"&gt;
      &lt;area href="#" title="SC" shape="poly" coords="735,418, 734,419, 731,418, 731,416, 729,413, 727,411, 725,410, 723,405, 720,399, 716,398, 714,396, 713,393, 711,391, 709,390, 707,387, 704,385, 699,383, 699,382, 697,379, 696,378, 693,373, 690,373, 686,371, 684,369, 684,368, 685,366, 687,365, 687,363, 693,360, 701,356, 708,355, 724,355, 727,356, 728,360, 732,359, 745,358, 747,358, 760,366, 769,374, 764,379, 762,385, 761,391, 759,392, 758,394, 756,395, 754,398, 751,401, 749,404, 748,405, 744,408, 741,409, 742,412, 737,417, 735,418"&gt;&lt;/area&gt;
      &lt;area href="#" title="HI" shape="poly" coords="225,521, 227,518, 229,517, 229,518, 227,521, 225,521"&gt;&lt;/area&gt;
      &lt;area href="#" title="HI" shape="poly" coords="235,518, 241,520, 243,520, 244,516, 244,513, 240,512, 236,514, 235,518"&gt;&lt;/area&gt;
  </code></pre>