There are many plugins for jQuery to zoom in and out of images. But I was unable to find one that also zoomed the associated image map, so I wrote this.
Download the Javascript source (requires jQuery 1.7 and jQuery UI).
Download the old version (for jQuery 1.6 and earlier).
$('.selector').zoomable();
where .selector is the selector for your image. You can also call the following methods using
$('.selector').zoomable('methodName');
| Method name | Description |
|---|---|
| zoomIn | Zoom in to the image |
| zoomOut | Zoom out from the image |
| reset | Reset the image to its original size and location |
Test it out with this demo. Drag the image around with the mouse and zoom with the mouse wheel (or use the buttons). A word of warning, if you specify height and width attributes for your image the image map may not get resized correctly.