Web Tools - mcImageZoom.js

Sometimes, I use web pages to document things that require lots of images (screen shots, charts, what ever). The problem is The other problem I wanted to solve was to provide a way to highlight a part of an image. mcImageZoom.js (7KB) solves these problems by

Example | Usage


Features: Additional features when 2 images are configured as "an overlay pair":


To use this library, copy mcImageZoom.js to your system and place the following in the main html file. (Adjust the path as necessary.) By default, each image with a class of mcZoomThis will be zoomable using the mouse - via either the wheel or double clicks. If you want a different class name, then you must explicitly call mcAddZoomToImagesByClass("new_name") during the window.onload method. If the web page has its own window.onload method, then it must explicitly include the following function.

The optional image width parameter will become the default when using a double click or a reset button to resize the image. Each image on a page can have a different default width - but overlay pairs will always display with the same width (ie, the value assigned to the second is ignored).

In order to change the image when the mouse moves over it, include 2 images of the same size. The program will automatically find and associate the second image when its id is identical to the first plus the characters "_mouseOver". (See example.) In addition, the program will automatically hide the second image .. provided the user has javascript enabled. The optional style="display:none" can be included for those cases where javascript is disabled. Or you can just set the width to zero - regardless of the value entered, the original width will be set identical that of the primary (displayed) image.

If you want to save or print an image, you simply right click it and select from the context pop-up menu. When there is an overlay image, this context menu refers to only the second image (because the images automatically swap). To access the original image, hold down the shift key before moving the mouse over the image.

This is an example of how to reset all the associated images to their original values. (Same as the button in the previous section.)

Author: Robert Clemenzi
URL: http:// mc-computing.com / WebTools / mcImageZoom_js.html