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

If I make them full size, then the page becomes too large
If I make them small, then the details are not visible

The other problem I wanted to solve was to provide a way to highlight a part of an image. mcImageZoom.js (9KB) solves these problems by

Allowing the user to zoom the images via the mouse
Automatically swapping paired images while maintaining the current zoom level

Examples - nozoom | Usage | Height Issue | Chrome 49 "width" issue | Changes

Examples

mouseOver example	Only one image

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

Features:

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
A 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.

NoZoom

Sometimes, I simply want to swap images on mouseover (typically, to highlight something) but don't want the mouse wheel to zoom the image. This is the same mouseOver example as above, but with the zoom disabled by adding nozoom (not case sensitive) to the image tags.

mouseOver example - NoZoom

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.

Usage

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.

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 image is ignored).

Overlays

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.

To allow overlays, but prevent zooming, add nozoom (not case sensitive) to the image tags.

Reset Button

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

<button onclick="mcResetImagesByClass('mcZoomThis') ">Restore Image Sizes</button>

Class Name

By default, all images associated with a classname of mcZoomThis are automatically configured. 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, it will replace the default method in the javascript file, and the page's method must explicitly include the following function.

mcAddZoomToImagesByClass("mcZoomThis");

Height Issue

It is considered good practice to set (specify) both the height and width of all images so that the browser knows what to expect, and can reserve the correct amount of space, before loading them. When that is not done, the formatting of a web page keeps changing as each image is loaded. (Very irritating - common on many news pages.)

When only one of those is set, the browser uses the image's aspect ratio to automatically set the other. However, when both are set, then the program must set them both when zooming the image.

Unfortunately, when testing the first release of this library, I had only set the widths of the images and not their heights. When the image was zoomed, only the width was changed by the program and the browser automatically set the height to maintain the aspect ratio. About a year later, I observed that when the height was also set (which it should be), the zoom would only change the image width. The 06-10-2017 release fixes that.

There are 2 ways to fix the height problem - they both work.

if (image.attributes["height"] !== undefined) image.style.height = "auto";

if (image.attributes["height"] !== undefined) image.attributes["height"].value = "";

Since the code runs only after the page is fully loaded, neither of these affects the page at the time it is executed (unless the aspect ratio changes), and both allow the zoom to work the same as if only the width had been set. I have no idea which is better - probably does not matter. At any rate, I chose setting the attribute value to the null string.

Chrome 49 "width" design problem

While developing DOCTYPE.html (concerning various browser design issues), I discovered a Chrome 49 (under Windows XP) design problem where an image width of 296 becomes 295.99 which is then truncated to 295 with no obvious way to detect the problem. This would not be an issue if it did not cause a visible flicker when I switch images. In this example, there are 2 images. According to Windows Explorer, both images have a width of 296 pixels. However, when I set the width to 296, Chrome 49 changes that to 295. You can see this when you move the mouse over the image below. To see the change a second time, you first have to refresh the page (press F5).

Example overlay images with width=296

As part of the debug, I tried setting the value in code --- and it failed !!!

image.width = 296 ; // after this, the value of width is 295 !!!

Unbelievable!!

All the other images above have a width of 360 and do not appear to have a problem (which is why it took over a year to discover that there is (was) a problem).

I tried various ways to work around this nonsense. One technique that worked was to use styles to set the width instead of the width property.

if (image.attributes["width"] !== undefined) image.style.width = image.attributes["width"].value + "px"; // this works in Chrome 49

That worked, but was far more complicated because I had to use a string with a px added to the end. As a result, scaling was no longer a simple multiply and an additional numeric property had to be added to each image to make it work - far more complicated than the simple code I normally use.

The real problem is a basic javascript design issue - there are no variable types!!!

Basically, all variables are variants and all numbers are stored as floating point (non-exact value) numbers. I don't know what moron thought it was a good idea to design a language without an integer variable type, but that is what these goofballs did.

In addition, widths can be entered with many different dimensions - pixels, picas, millimeters, etc - and the browser automatically converts between them. Depending on the browser internals, there is no telling what a width might be. What I enter as pixels might be stored as something else and then converted back to pixels when I try to use the value. The bottom line is a crappy user experience.

At any rate, since none of the Windows 10 browsers I tested have this problem, the final decision was to ignore the problem.

On the other hand

After spending over a day collecting data and writing the above, I discovered that the issue was caused by the browser zoom being set at 90%. When I changed it to 100%, the "problem" went away.

When zooming the page (ctrl-scrollwheel), the widths in Chrome 49 toggle between the integer value and another value close to it. There is no way that that is ever correct. Very frustrating.

In Chrome 57, the browser always provides the same integer value, but it doesn't change when the zoom changes.

I have left this section in because it documents a real Chrome design problem (fixed in a later version) that cost me about 2 days to research and characterize.

Changes

Version	Changes
05-28-2015	Initial release
03-01-2016	Just changes in the comments - no code changes
06-10-2017	Added nozoom attribute to support overlays without zooming Fixed problem when image height is set

Author: Robert Clemenzi