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?
from Maphilight() stops working correctly after zoom in/out of imagemap
No comments:
Post a Comment