Here are my requirements: I have a DIV which should display an image (JPEG). When the page gets rendered, this div should display the image with a specified zoom factor to the specified position (point) on the picture. The picture should be placed inside this DIV (cannot exceed the DIV margins). On this DIV the image can be (after this initial zoom) moved/pan (by mouse or scrollbars) and zoomed in and out (by mousewheel, buttons, slider or any method). In certain events, the DIV should display (focus on) another point of the image (same or other zoom factor). The image will change in some events. When the focus switches from one point to another (but on the same page) I do not want to reload the picture, just in case the source of the images changes.
I found something similar here, but not quite close to my requirements:
http://www.htmldrive.net/items/show/394/JQuery.iviewer-zoom-image-and-to-drag-effect
I mention that I am a newbie in javascript, and any help on any of part of the requirements is more than welcomed. If you know a (free) plugin that can do this, please let me know.
Thank you for your precious time you put into my question
After a closer look at the IVIEWER plugin mentioned above, I found that it also includes a moveTo method which positions the image at the specified point, so IVIEWER includes all my requirements.