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

Question

I have one image map with 300-400 poly areas which on event "onclick" shoud highlight that area and get some data etc... When page is loaded (my images are kinda big, 3-5MB) so I resized those imagemaps using davidjbradshaw/image-map-resizer plugin. When I started to implement highlight method, everything worked fine, but after zoom in/out of image my poly cords are messed up. If I remove highlight option and zoom in/out my poly cords are resized to proper image size.

JS code for resizing (working correctly)

 $( 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 code for resizing/highlight (not working correctly)

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

Without zoom in/out imageresizer and highlight works perfect.

After zoom in/out

What am I doing wrong?

Sebiferous

Answer 1

What am I doing wrong?

Nothing, as I could see the code.

I think the problem is with the jQuery.maphilight() plugin itself, which apparently doesn't support responsive scaling, yet.

So instead of trying to fix the problem/issue, or while waiting for the author to fix it, you might want to consider using jQuery.mapster().

Working Example

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

Demo: http://jsfiddle.net/mt5pynn8/
Demo: http://jsfiddle.net/mt5pynn8/1/

Additional Notes

jQuery.mapster() does not support jQuery version 3, and secondly, the plugin was last updated in 2013.. (But it still works pretty well.)

UPDATE

jQuery.mapster() comes with a resize feature; hence imageMapResize() is not necessary. Note though, that the resize functionality is not perfect as I've tested it. Neither imageMapResize() nor jQuery.mapster().

Valerio