l'analyse des coordonnées sur l'image carte

Question

J'ai une carte cliquable html des États-Unis, mais je voudrais le redimensionner à la moitié de sa taille actuelle. Cela signifie que je vais aussi avoir besoin de diviser toutes les valeurs de coordonnées en deux afin que les zones de clic soient toujours précises. Au lieu de le faire manuellement, existe-t-il un moyen facile de parcourir le DOM et de diviser automatiquement toutes les coordonnées par 2? Voici le code 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

J'ai quelque chose comme:

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; 
}