views:

89

answers:

1

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");
});
A: 

Only when the mouse lingers, fairly motionless, over the image, do you want to zoom it. You don't want the image to zoom out merely from incidental mouse contact.

I would suggest that you start a timer when the mouse is over the image, which invokes the zoom function some 250-500ms later, provided the mouse hasn't moved more than a set threshold distance in that interval. If the mouse moves more than your threshold distance (edit: while still on the image, or moves off the image), kill the timer so the zoom does not occur.

Tim
oooh that sounds promising! I'm going to try to work out how to do that - hopefully i can get it, certainly havent written a script like that before so it will probably take me a while with some trial and error!
VUELA
for some reason in Internet Explorer 7 the map image is jumping outside of it's containing element (like overflow: hidden; isnt working). it also isjumping around the page and is much more glitchy than in other browsers.
VUELA
I can't figure out how to do this!~
VUELA
Search for examples of setTimeout and clearTimeout.
Tim
There is also a plug-in for jQuery that may be of some use to you (I've not had occasion to use it myself) called hoverintent.
Tim