Html page mini map or map overview

I have a big html page, like 4000x6000 px with images and text. I'd 开发者_如何学Pythonlike to have something like a map overview of this page in a small div. A scaled version of the whole page which i could use to navigate. Does anyone know some js script or example how to do that? Thanks.

Here's the basic framework of how you would do it:

Find a way to take a screenshot of the whole page. Then, resize it down with a scaling factor (like 1/25th).

In the corner of the page, overlay an image. Create an event handler that reacts to where you click on the image. Inside of the event handler, find the location of where the image was clicked (ie x-coordinate, y-coordinate).

Use the reciprocal of the scale (perhaps x25 if the scale was 1/25th) to get the actual dimensions of the page. Use jQuery to scroll to that location.

If you need any help with one of these steps, let me know; this is just to get you started.

I can't think of a single way to do that in html/javascript, for am image sure, but for an entire page?. If the site was built in flash... but short of that, I think you may be S.O.L. sorry. Why is your site so big anyway? That is far beyond the avg users resolution, and violates about 15 usability rules.