"zoom" on an image

Hi,

I'm creating a website for my father, he has a little company.
(http://www.aendekerk.be/beta)

I would like to describe the location if this company with a roadmap.
The visitor should be able to zoom in and out this map. But i don't
really want to zoom on an existing image. But when the users clicks
"zoom in", another, more detailed image should be loaded. These same
thing when the user clicks "zoom out".

For example. The page gets loaded. image3.jpg is displayed. There are 2
buttons; "zoom in" and "zoom uit". When you click "zoom in", image2.jpg
should be displayed. When you click "zoom in" again, "image1.jpg"
should be display. After that, zooming in should be made impossible
(image1.jpg is the most detailed roadmap). The same story for "zoom
out". When (for example) image1.jpg is visible, clicking on "zoom out"
should load image2.jpg, after that image3.jpg and so on. "image5.jpg"
is the maximum zoom out.

This is what i have for the moment:
http://www.aendekerk.be/zoom/

But i want to change 2 things:
* The images (roadmaps) should not be preloaded. Otherwise it would
take too long to load this page.
* Instead of text (zoom in, zoom uit) i would like to use GIF's as
zoom-buttons. When zooming in (or out) is not possible anymore (when
the maximum zooming limit has been reached), i would like to load other
gif's as zoom-buttons to indicate zooming is not possible anymore.

Who can help me?

Thanks!

Dries

--
E-mail: dries <punt> aendekerk <ad> advalvas <punt> be