Panning an image around

[drd]

Hi,

I've been working on a site which has a location map. Basically, when one zooms in I want to be able to pan around. To see what I mean here is a link, if you click zoom in (under the map) you'll see that you can't pan:

http://www.hairbypietro.co.uk/findus.html


It would be nice to be able to pan around and I can see its something I'll use a lot in the future. However, I've googled for this and I can't find an easy solution - bearing in mind I am quite new to Javascript.

Can anyone help?

Thanks in advance!

Dave

[ukgeoff]

All that is happening is that a larger version of the image is being loaded into the fixed dimensions of the div, hence the scroll bars appear so that you can move around the larger image.

BTW: Followed the link to your own site and I note there are a number of layout problems, particularly in Firefox and Opera.

If you are up for it, you might like to post in the critique forum.

[drd]

Yes I know why Im getting scroll bars on that site, but what I mean is - I want to implement some Javascript to make it so the user can pan which will be nicer than using the scroll bars.

What layout problems do you see on my site? I don't have any issues in Opera or Firefox?

[ukgeoff]

Originally Posted by drd

What layout problems do you see on my site? I don't have any issues in Opera or Firefox?

Layout problems with all three pages under the 02work section.

Personally, I also don't like the way the black header bar extends the full width of the browser when the designed page width is clearly less.

[drd]

Originally Posted by ukgeoff

Layout problems with all three pages under the 02work section.

Personally, I also don't like the way the black header bar extends the full width of the browser when the designed page width is clearly less.

I havent seen any problems, can you post a print screen?

ta

[ukgeoff]

Here is the 02work-web page:
http://www.1ontheweb.net/picture_lib...k-web-page.png

[drd]

OK thanks, well, I was going to change the site anyway, strange I havent seen that on other machines, nevermind.

Anyone got any ideas on the panning Javascript?

[ukgeoff]

As it happens, I have been reading something just today, actually associated with Ajax, but you don't actually need that.

It uses two divs, one on top of the other, the larger one behind contains the image(s) and the smaller one on top acts as a window on the one behind.

JavaScript functions are hooked onto the mouse events to control the dragging(panning) process.

Needless to say there is a bit more involment than this but it gives you an idea of the way to go.