Google maps loading images like

I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.

I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.

Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that ar开发者_如何学Ce new in active area.

see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg

PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)

---

Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for

DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax