parsing coordinates on image map

Question

I have a clickable html image map of the US, but I would like to resize it to half its current size. This means I'm also going to need to divide all the coord values in half so that the click areas are still accurate. Instead of doing this manually, is there an easy way to traverse the DOM and automatically divide all the coordinates by 2? Here's the html:

    <div id="map">
    <img class="map" src="images/us_map.jpg" width="960" height="593" usemap="#usa">
    <map name="usa">
    <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"></area>
    <area href="#" title="HI" shape="poly" coords="225,521, 227,518, 229,517, 229,518, 227,521, 225,521"></area>
    <area href="#" title="HI" shape="poly" coords="235,518, 241,520, 243,520, 244,516, 244,513, 240,512, 236,514, 235,518"></area>

'

Answer 1

I have something like:

var rects = document.getElementsByTagName('area');
var ratio = 1/2;

for (i = 0; i < rects.length; i++) {
    coords = rects[i].coords.split(",");
    coord = '';
    for (j = 0; j < coords.length; j++) { 
        newCoord = coords[j].trim() * ratio;
        coord += newCoord;
        if (j + 1 < coords.length) {
            coord +=', ';
        }
    }       
    rects[i].coords = coord;
}