标签: maphilight

我有一个图像地图有300-400个多边形区域,在事件"onclick"上突出显示该区域并获取一些数据等...当页面加载时(我的图像有点大,3-5MB)所以我调整了这些图像地图的大小davidjbradshaw/image-map-resizer插件.当我开始实现高光方法时,一切工作正常,但在放大/缩小图像后,我的聚合线被搞砸了.如果我删除高亮显示选项并放大/缩小,我的多边形线会调整为适当的图像尺寸.

调整大小的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();
    });
  }

用于调整大小/突出显示(无法正常工作)的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() { …

我正在使用David Lynch的Maphilight,并且只要在鼠标悬停时突出显示它就可以了.我遇到的问题是什么,似乎没有任何例子,当点击一个区域时,区域A突出显示并保持点亮状态B.单击另一个区域时停用.

基本上,我正在使用演示页面中的脚本并尝试相应地修改它,但是,我尝试过的一切都没有用.它看起来非常简单明了,所以我很惊讶这个功能几乎没有文档.

有人有任何想法吗？基本上,我用作地图的图像是一个圆形,分为象限.当鼠标悬停时,每个象限都应亮起,并在点击时保持亮起,直到选择了地图上的新象限.这是我用于脚本的内容:

$('.map').maphilight({fillColor: 'ff0000'});

$('#q1, #q2, #q3, #q4').click(function(e) {
        e.preventDefault();
        var data = $(this).mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    });

你可能有任何帮助或建议会很棒.

更新:我正在处理的页面的在线链接是http://test.dpigraphics.net/process.php