I'm working on a problem that I thought would be common but so far I haven't been able to find a good solution.

I need to create a scrolling map that works similar to google maps (only more simplistic). The page will display a 500X500 pixel image which is itself made up of 25 100px blocks. The user will be able to move in any direction by clicking arrows on the perimeter of the map.

The 500px image is part of a much larger image. The pieces of which are stored on a server in 100px squares.

One click should advance the map 500px in the selected direction thereby completely replacing the original image.

I was thinking that I would initially load 9 separate images (the center image plus 8 hidden images in each direction N,S,E,W,NE,NW,SE,SW). All would be held in divs and the individual 100px blocks would be in tables within the divs.

When a user advances in any direction, an ajax call would be made to pre-load a new image in that direction so they can continue to move around the map without delay.

I'm afraid that I'm going to spend a lot of time coming up with my own way of doing this only to find that there is a common approach that works better. Seems like this sort of thing would be done all the time in web-based games like Tribal Wars and Fallen Sword.

Is anyone aware of a good example of how something like this is done? I've been looking for two days and haven't found anything yet. Maybe there's a name for this behavior and I'm unaware of it?

Not sure that it matters but I'm using ASP.Net with the Ajax Toolkit. I'm also considering jQuery for some areas where performance might be an issue.


Thanks for the help!

I use MooTools for my JS and there is a "Scroll" class that can be used to scroll to certain elements or coordinates and smoothly. It would be very easy to setup something like what you described.

Maybe you should look to see if jQuery (or use MooTools) has something like that.