使用 jQuery 更改图像映射坐标值答案

【问题标题】：Using jQuery to change image map coord values使用 jQuery 更改图像映射坐标值
【发布时间】：2011-03-23 17:11:21
【问题描述】：

我有一个非常复杂的图像映射，我想将其缩小一半。这样做需要将所有坐标值除以 2。由于有数千个坐标值，我想我可以使用 jQuery 遍历 DOM 来找到坐标值，然后将它们除以 2。当涉及到 JavaScript 和 jQuery 时，我非常业余，我编写了以下代码，但无法完成我的任务：

$(function(){
    $('area').each(function(){
        coord_vals= $('area'[coords]).split(',');
        new_vals= coord_vals/2;
        $('area'[coords]).val(new_vals + ',');
    });
});

这是我试图遍历的前几行 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>

【问题讨论】：

标签： jquery resize coords

【解决方案1】：

你在正确的轨道上只是你没有在你的循环中使用 $(this) 。此外，要获取坐标，您可以使用 attr('coords')

固定版本

$(function(){ 
   $('area').each(function(){
      var coord_vals = $(this).attr('coords').split(',');
      var new_vals;
      for(var i=0; i<coord_vals.length; i++) {
          new_vals[i] = coord_vals[i] / 2;
      }
      new_vals = new_vals.join(",");
      $(this).attr('coords').val(new_vals);
   });
});

【讨论】：

有些事情，你不能将一个数组除以 2，那里的空格不会给出你想的结果，而且你永远不会声明 new_vals，所以你是创建一个错误类型的新全局变量。
它显示 Unable to set property '0' of undefined or null reference 错误

【解决方案2】：

你可以这样做：

$("area").each(function() {
    var pairs = $(this).attr("coords").split(', ');
    for(var i=0; i<pairs.length; i++) {
        var nums = pairs[i].split(',');
        for(var j=0; j<nums.length; j++) {
            nums[j] = parseFloat(nums[j]) /2;
        }
        pairs[i] = nums.join(',');
    }
    $(this).attr("coords", pairs.join(', '));
});

这会维护格式并仔细转换每个有效值，这是输出：

<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="367.5,209, 367,209.5, 365.5,209, 365.5,208, 364.5,206.5, 363.5,205.5, 362.5,205, 361.5,202.5, 360,199.5, 358,199, 357,198, 356.5,196.5, 355.5,195.5, 354.5,195, 353.5,193.5, 352,192.5, 349.5,191.5, 349.5,191, 348.5,189.5, 348,189, 346.5,186.5, 345,186.5, 343,185.5, 342,184.5, 342,184, 342.5,183, 343.5,182.5, 343.5,181.5, 346.5,180, 350.5,178, 354,177.5, 362,177.5, 363.5,178, 364,180, 366,179.5, 372.5,179, 373.5,179, 380,183, 384.5,187, 382,189.5, 381,192.5, 380.5,195.5, 379.5,196, 379,197, 378,197.5, 377,199, 375.5,200.5, 374.5,202, 374,202.5, 372,204, 370.5,204.5, 371,206, 368.5,208.5, 367.5,209">
    <area href="#" title="HI" shape="poly" coords="112.5,260.5, 113.5,259, 114.5,258.5, 114.5,259, 113.5,260.5, 112.5,260.5">
    <area href="#" title="HI" shape="poly" coords="117.5,259, 120.5,260, 121.5,260, 122,258, 122,256.5, 120,256, 118,257, 117.5,259"> 
  </map>
</div>

You can give it a try here。

【讨论】：

【解决方案3】：

我认为最好编写一些代码来为您生成新代码。这样做将减少初始化时间并使您的用户更快乐。我拼凑了a demo，基本上它用转换后的代码填充了一个文本区域，您只需用它替换原始代码。

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>
 <!-- ETC -->
 </map>
</div>

<textarea id="newAreaTags"></textarea>

脚本

$(document).ready(function(){
 var newmap = '', coords;
 $('map[name=usa]').find('area').each(function(){
  newmap += '<area href="#" title="' + $(this).attr('title') +
   '" shape="' + $(this).attr('shape') + '" coords="';
  coords = $(this).attr('coords').replace(/\s+/g,'').split(',');
  for (var i = 0; i < coords.length; i++){
   coords[i] = Math.round(parseInt( coords[i], 10) / 2);
  }
  newmap += coords.join(',') + '"></area>\n';
 });
 $('#newAreaTags').val(newmap);
})

【讨论】：

【解决方案4】：

 jQuery('#planetmap area').each(function (e) {
            jQuery(this).mousemove(function () {
                jQuery('#dataval').html(jQuery(this).attr('coords'));
                jQuery(this).click(function () {
                    jQuery(this).attr('title', 'SHASHANK');
                    var current_cordinate = jQuery(this).attr('coords').split(',');
                    var nextX = Math.ceil(current_cordinate[2]) + 1;
                    var NextY = Math.ceil(current_cordinate[3]);
                    var downX = Math.ceil(current_cordinate[2]) + 1;
                    var downY = Math.ceil(downX) + 1;
                    //var new_next_coordinate = jQuery(this).attr('coords', ('0,0,' + nextX + ',' + NextY))
                    //alert(new_next_coordinate.text());
                    jQuery(jQuery(this).find('coords','0,0,'+nextX+','+NextY)).attr('title', 'SHASHANK');
                    alert("SUBMIT");

                });
            });
        });

【讨论】：

【解决方案5】：

我知道你说过你只是将你的图像地图缩小了一半，但我想我会给你一些代码来让你的地图响应。随着使用地图的图像重新调整大小，坐标也会相应改变。

它做的第一件事是存储图像映射的原始坐标，然后在页面重新调整大小时运行函数 mapResize。

$(function() {
  $("area").each(function() { $(this).attr('data-coords', $(this).attr('coords')) });
  $(window).resize(mapResize);
  setTimeout(mapResize, 1);
});

var mapResize = function() {

在这里，您将看到我们抓取了使用 usemap 名称的图像。如果您还想使用网站上的任何其他地图，请在此处使用。

然后代码将图像当前宽度除以其原始宽度。我们稍后使用该数字乘以坐标来给出坐标的新值。

  $("map").each(function() {
    var img = $("img[usemap='#" + $(this).attr("name") + "']");

    if (img[0].naturalWidth) {
      widthchange = img.width() / img[0].naturalWidth;
    }
    else {
      widthchange = 1;
      setTimeout(mapResize, 1000);
    }
    //borrowed this from Nick's answer.  It was spot on!
    $("area").each(function() {
      var pairs = $(this).attr("data-coords").split(', ');
      for(var i=0; i<pairs.length; i++) {
          var nums = pairs[i].split(',');
          for(var j=0; j<nums.length; j++) {
              nums[j] = parseFloat(nums[j]) * widthchange;
          }
          pairs[i] = nums.join(',');
      }
      $(this).attr("coords", pairs.join(', '));
    });
  });
}

是的，这可能不是您确切问题的答案，但我认为它回答了您的问题并且更进一步。

我也知道这是一个 2 岁的问题，但我正在寻找我自己的问题的答案，这是最有帮助的线程。只是想添加我的调整 =)

【讨论】：