Imagemap 缩放 in/out 后 Maphilight() 停止正常工作

Question

我有一个包含 300-400 个多边形区域的图像地图，在事件 "onclick" 应该突出显示该区域并获取一些数据等...当页面加载时（我的图像有点大，3-5MB ) 所以我使用 davidjbradshaw/image-map-resizer 插件调整了这些图像映射的大小。当我开始实施高亮方法时，一切正常，但在图像缩放 in/out 后，我的聚线被弄乱了。如果我删除突出显示选项并缩放 in/out，我的聚线将调整为适当的图像大小。

调整大小的 JS 代码（工作正常）

 $( document ).ready(function() {
    imageMapResize();
  });

  function ZoomIn () {
    $("img").animate({
      height: '+=200',
      width: '+=200'
    }, 1000, function() {
      imageMapResize();
    });    
  }

  function  ZoomOut () {
    $("img").animate({
      height: '-=200',
      width: '-=200'
    }, 1000, function() {
      imageMapResize();
    });
  }

resizing/highlight 的 JS 代码（无法正常工作）

$( document ).ready(function() {
    imageMapResize();
    $('img[usemap]').maphilight();
  });

  function ZoomIn () {
    $("img").animate({
      height: '+=200',
      width: '+=200'
    }, 1000, function() {
      imageMapResize();
      $('img[usemap]').maphilight();
    });
  }

  function  ZoomOut () {
    $("img").animate({
      height: '-=200',
      width: '-=200'
    }, 1000, function() {
      imageMapResize();
      $('img[usemap]').maphilight();
    });
  }

没有缩放 in/out imageresizer 和高光效果完美。

缩放后 in/out

我做错了什么？

Answer 1

What am I doing wrong?

没什么，因为我看到了代码。

我认为问题出在 jQuery.maphilight() plugin itself, which apparently doesn't support responsive scaling, yet。

因此，与其尝试修复 problem/issue，或者等待作者修复它，不如考虑使用 jQuery.mapster().

工作示例

$( document ).ready(function() {
  $('img[usemap]').mapster({
    fill: true,
    fillColor: '000000',
    fillOpacity: 0.2,
    stroke: true,
    strokeColor: 'ff0000',
    strokeOpacity: 1,
    strokeWidth: 1,
    fade: true
  });
});

function ZoomIn() {
  $("img").animate({
    height: '+=200',
    width: '+=200'
  }, 1000, function() {
    $(this).mapster('resize', $(this).width(), $(this).height());
  });
}

function ZoomOut() {
  $("img").animate({
    height: '-=200',
    width: '-=200'
  }, 1000, function() {
    $(this).mapster('resize', $(this).width(), $(this).height());
  });
}

~~演示：http://jsfiddle.net/mt5pynn8/~~
演示：http://jsfiddle.net/mt5pynn8/1/

补充说明

jQuery.mapster()不支持jQuery版本3，其次，该插件最后更新于2013年..（但它仍然很好用.)

更新

jQuery.mapster() 带有调整大小功能；因此 imageMapResize() 不是必需的。不过请注意，根据我的测试，调整大小功能并不完美。 imageMapResize() 和 jQuery.mapster().

都不是

Imagemap 缩放 in/out 后 Maphilight() 停止正常工作

Maphilight() stops working correctly after zoom in/out of imagemap

javascript

jquery

zooming

imagemap

maphilight