javascript - Jquery脚本将图像 map 区域的标题放入文本输入表单？

Question

所以我的页面上有这张世界地图，但我似乎无法让这一切正常工作。我已正确映射图像并使其响应...但我无法从单击以填充区域分类文本字段输入的 map 区域获取标题属性。我对整个 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>

这是网站本身的链接，它正在运行新的 Bootstrap ...www.zoomglobaltravel.com/perfect.html(区域字段还没有在那里......)

请帮忙:?

Answer 1

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

基本上，您将点击事件监听器附加到所有 <area>位于#image_map 。在此监听器中，您将获得 title单击区域的属性并将其设置为 #region 的值输入框。