Hi!~ I've been working on this for a while now (many months!!) -- using jquery to zoom and pan an image map - which is a bit outside my current skill level so I'm excited that I have gotten this far!!~ but the functionality is not as smooth as it needs to be (the zoom in and out needs to be smoother) - and there are some larger issues when viewed in IE7.
Here it is on the webpage: http://www.agencydr.squarespace.com/locations
Below is the jquery used. Does anyone notice anything I should change?
/* ************************************** */
/* locations map */
/* ************************************** */
$('#modulePage6955407 #sectionContent3019160').insertAfter("#pageHeaderWrapper");
$('#modulePage6955407 #bannerAreaWrapper').animate({"top": "+=250px"}, "slow");
$('#modulePage6955407 #sectionContent3019160').animate({"height": "290px"}, "slow");
$('#modulePage6955407 #sectionContent3019160').animate({"opacity": "1"}, "slow");
$('#LocationsMapWrapper').hover(function() {
$('#LocationsMapWrapper #MapImage').animate({
width: 600,
height: 375,
marginLeft: 550,
marginTop: -20
}, "slow", "easeOutQuad");
},
function() {
$('#LocationsMapWrapper #MapImage').animate({
width: 478,
height: 265,
marginLeft: 480,
marginTop: 0
}, "slow", "easeOutQuad");
}).mousemove(function(e){
$("#LocationsMapWrapper #MapImage").each(function(){
var position = $(this).offset();
var position_x = position.left;
var position_y = position.top;
position_x = 0;
position_y = 0;
var windowwidth = ($(window).width()/2);
var windowheight = ($("#LocationsMapWrapper").height()/2);
var endX = (windowwidth)-(e.pageX);
var endY = (windowheight)-(e.pageY);
var speed = 5;
position_x += (endX-position_x)/speed;
position_y += (endY-position_y)/speed;
$(this).css({'position': 'relative'});
$(this).css({'left':position_x});
$(this).css({'top':position_y});
});
}).mouseleave(function(){
$("#LocationsMapWrapper #MapImage").each(function(){
$(this).css({'left':0});
$(this).css({'top':0});
});
});
and here is some relevant css:
/* locations map */
#sectionContent3019160 { width: 100%; height: 0px; margin: auto; opacity: 0.15; margin-bottom: 10px; z-index: 1; overflow: hidden; }
#sectionContent3019160 { margin-top: -48px; } /* up */
#LocationsMapWrapper { width: 1020px; height: 355px; margin: auto; }
#LocationsMapWrapper #MapImage { width: 478px; height: 265px; margin-left: 480px; }
Any help is appreciated!! I've tried everything I can think of to get this to run more smoothly but am at a loss. Please note that I am using a hosted CMS service so I have to modify a somewhat established html layout.
UPDATE: Here is my updated code at the moment:
$('#LocationsMapWrapper').hover(function() {
$('#LocationsMapWrapper #MapImage').stop().animate({
width: 600,
height: 375,
marginLeft: 550,
marginTop: -20
}, "slow", "easeOutQuad").mousemove(function(e){
var position = $(this).offset();
var position_x = position.left;
var position_y = position.top;
position_x = 0;
position_y = 0;
var windowwidth = ($(window).width()/2);
var windowheight = ($("#LocationsMapWrapper").height()/2);
var endX = (windowwidth)-(e.pageX);
var endY = (windowheight)-(e.pageY);
var speed = 5;
position_x += (endX-position_x)/speed;
position_y += (endY-position_y)/speed;
$(this).css({'position': 'relative'});
$(this).css({'left':position_x});
$(this).css({'top':position_y});
});
}, function() {
$('#LocationsMapWrapper #MapImage').stop().animate({
width: 478,
height: 290,
marginLeft: 480,
marginTop: 0,
left: 0,
top: 0
}, "slow", "easeOutQuad");
});