In this example, I want to highlight an issue in the plot.
When the mouse moves over the image, the second image, with red highlights, is displayed.
Use the mouse wheel and double clicks to zoom the image
The mouse wheel zooms the image
Double clicking a zoomed image will restore the original size
If the size is already the original, then double clicking will make the image full size
button resets all the images on the page that have the associated class
back to their original size.
Additional features when 2 images are configured as "an overlay pair":
Mouse over automatically displays the second image
The mouse wheel zooms both images together - their zoom's stay in sync
To keep the images from swapping,
hold down the shift key before moving the mouse over the image.
This will allow you to right click and access the context sensitive pop-up menu
for the main image.
Otherwise, the context menu will apply to the second image.
To use this library,
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.)
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.)