jQuery腳本將圖像地圖區域的標題放入文本輸入形式？

Question

因此，我在頁面上有這張世界地圖，但似乎無法正常運行。 我已經正確映射了圖像並使其具有響應性...但是我無法從單擊區域中填充區域分類文本字段輸入的地圖區域中獲得title屬性。 我並不是整個jQuery領域的專家，所以任何幫助都將是驚人的。

這是我正在使用的代碼：

     <img src="img/map.svg.png" class="map" width="2000" height="1057" alt="Insert Alt" usemap="#image_map" border="0">

<map name="image_map" id="image_map">
  <area shape="poly" class="region" data-toggle="tooltip" coords="" href="javascript:;" title="red"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 309,238" href="javascript:;" title="green"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 222,276, 202,295, 1,299, 6,124, 162,148, 160,236, 225,277" href="javascript:;" title="Alaska"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 54,474, 136,522, 74,558, 32,504, 57,474" href="javascript:;" title="Hawaii"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 167,149, 167,235, 263,324, 607,354, 639,201, 530,92, 169,148" href="javascript:;" title="Canada"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 251,330, 257,442, 415,485, 512,489, 607,358, 252,328" href="javascript:;" title="USA"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 298,458, 423,492, 473,511, 422,558, 297,480, 298,461" href="javascript:;" title="Mexico"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 429,557, 467,523, 524,584, 501,615, 431,561" href="javascript:;" title="Central America"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1052,267, 1116,354, 1086,411, 1101,427, 893,411, 880,236, 1056,268" href="javascript:;" title="Western Europe"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 547,568, 481,638, 494,1014, 619,1030, 786,666, 572,553, 546,567" href="javascript:;" title="South America"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 474,497, 512,548, 601,532, 550,496, 478,497" href="javascript:;" title="Carribean"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1026,822, 1140,785, 1137,849, 1044,881, 1024,821" href="javascript:;" title="South Africa"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 846,417, 1116,428, 1195,570, 1239,570, 1233,807, 1145,781, 1023,819, 958,635, 846,630, 847,412" href="javascript:;" title="Africa"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 807,173, 884,186, 863,223, 795,225, 811,165" href="javascript:;" title="Iceland"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 971,247, 1055,264, 1119,354, 1095,412, 1132,432, 1140,417, 1195,406, 1222,395, 1218,374, 1093,248, 1116,147, 1051,126, 973,180, 972,246" href="javascript:;" title="Eastern Europe"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1728,642, 1729,709, 1601,721, 1554,774, 1575,911, 1793,960, 1933,966, 1960,874, 1937,698, 1732,645" href="javascript:;" title="Australia"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1440,509, 1441,463, 1586,505, 1642,531, 1726,641, 1724,705, 1440,721, 1442,512" href="javascript:;" title="Southeast Asia"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1373,420, 1355,425, 1327,499, 1380,613, 1413,614, 1437,509, 1431,471, 1376,423" href="javascript:;" title="India"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1199,566, 1134,440, 1144,421, 1232,397, 1208,316, 1319,277, 1427,324, 1313,518, 1202,566" href="javascript:;" title="Middle East"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1439,318, 1379,415, 1493,469, 1608,508, 1693,376, 1644,291, 1431,319" href="javascript:;" title="China"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1725,348, 1771,368, 1670,472, 1659,447, 1725,352" href="javascript:;" title="Japan"/>
  <area shape="poly" class="region" data-toggle="tooltip" coords=" 1154,23, 1099,245, 1187,315, 1331,271, 1423,314, 1658,286, 1700,365, 1747,347, 1808,353, 1988,212, 1986,125, 1542,7" href="javascript:;" title="Russian"/>
</map>
</div>
</div>
<div class="regionspacing">
  <label for="region">Region</label>
  <input type="text" id="region" name="region" class="form-control input-md">
</div>

         <script>
        $(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
});
        </script>
        <script>
        $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({trigger: 'hover','placement': 'top'});
        $(function(){
    $('area').live('click', function() {
        $("#region").val($(this).attr('title'));
    });

});
        </script>

這是網站本身的鏈接，它正在運行新的引導程序... www.zoomglobaltravel.com/perfect.html（“區域”字段尚不在此處。）

請幫忙 ：？

Answer 1

$('#image_map').on('click', 'area', function (e) {
    $('#region').val(e.target.title);
});

基本上，您將click事件偵聽器附加到#image_map所有<area> 。 在此偵聽器中，您將獲得單擊區域的title屬性，並將其設置為#region輸入框的值。