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

Question

我有一个非常复杂的图像地图，我想缩小一半。要做到这一点，需要将所有coord值除以2.由于有数千个coord值，我认为我可以使用jQuery遍历DOM来查找coord值，并将它们除以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>

Answer 1

你可以这样做：

$("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。

Answer 2

我知道你说你只是把你的图像地图缩小了一半，但我想我会给你一些能让你的地图反应灵敏的代码。当重新调整使用地图的图像时，坐标会发生相应的变化。

它首先要做的是存储图像映射的原始坐标，然后在页面重新调整大小时运行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岁的问题，但我正在寻找自己问题的答案，这是最有帮助的话题。只想添加我的调整=）

Answer 3

我认为最好编写一些代码来为您生成新代码。这样做可以缩短初始化时间并使用户更快乐。我把a demo放在一起，基本上它用一个转换后的代码填充一个textarea，你只需用它来代替原文。

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

Answer 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");

                });
            });
        });

Answer 5

你是在正确的轨道上，只是你没有在循环中使用$（this）。另外，要获得coords，您可以使用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);
   });
});