Hi there,
Here's a quick and dirty way to do it, off the top of my head. Totally
untested, but should get you started, at least:
// determine left and top position of img
var imgLeft = $('#yourImage').offset().left;
var imgTop = $('#yourImage').offset().top;
// on click, grab the coords attribute of the area and add them to the
img position for animating
$('area').click(function() {
var toArea = $(this).attr('href');
var coords = $(toArea).attr('coords').split(',');
$('html, body').animate({
scrollLeft: imgLeft + coords[0],
scrollTop: imgTop + coords[1],
}, 400);
});
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 7, 2009, at 5:14 PM, schnuck wrote:
...what if the areas i need to scroll to are defined as anchors in
html <map> elements on top of a large inline image? and the areas that
trigger the links are image map areas too. clicking on the image map
areas scroll from one area to another. ideally not using absolute
positioning, but with html anchors and their IDs.
i tried modifying this technique here for no avail:
http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links
and this one here:
http://plugins.jquery.com/project/scrollto
any help appreciated - thanks!
