Experiment 1

last update: 11 Feb 2022

This experiment is part of a project is to develop a simple, HTML5- and CSS3-based method of presenting a multi-case numismatic exhibit, using the physical case dimensions of the cases used at conventions of the American Numismatic Association and others. The use of add-ons, plug-ins, JavaScript, and other browser extensions is avoided; their use adds size and complexity to files, while increasing maintenace and support efforts – all for very little extra benefit. Modern browsers do not need their capabilities enhanced for this type of webpage. Move the cursor over the small image of a case to have large images of an individual item appear – and then disappear as the cursor moves from that item. It is all about images.

The produced webpages are intended for a limited distributiom: the exhibitor and a few experienced exhibitors who volunteer to review exhibits and provide comments to novice exhibitors. Ease of webpage production is paramount, with ease of use secondary but important – nothing else matters. To make this capability accessible to as many exhibitors as possible, we assume images will be taken using a hand held post-2018 smartphone. So expect to see some imperfections in these images: they could be “stretched” to the four corners (or center), could show keystoning, and could be non-uniformly focused.

Of course, someone who wants an archive-quality record of his or her exhibit could take the extra time and expense needed to acquire “perfect” images, and then use those better images with the webpage. But that is not the initial intended use of this project. We are looking for “good enough,” not “perfection.”

Assayed at the Mint

200 years ago in a building not far, far away …

This three-case exhibit was entered in Class 18, Local Interest, at the 2018 ANA convention in Philadelphia. It is offered here as a demonstration of the effort to bring a multi-case exhibit to a webpage, showing the visual limitations. We are not seeking comments on this exhibit itself, but comments on the page’s format, operation, and usefulness are appreciated.

Here is a reduced-size image of the first case, with height and width at one-tenth of the original’s (after cutting off some edges, to get width and height a multiple of 10 pixels, and then scaling down to 389 px wide and 299 px high) – after saving this file with a JPEG Quality Parameter value of 85, the file is 35KBytes (which is about 0.7% of the original file’s size). The readability of the title is great and subtitle is okay, the headers are almost readable, and the text and tables are not readable at all. There are seven closeup images of the case’s six items (the last item is too large to fit in one closeup, so two closeups were made). Each presented closeup image has height and width reduced from the original closeup’s, so as to fit in the provided empty space – each file was saved with a JPEG Quality Parameter value of 85 to greatly reduce the file’s size – a separate photograph was taken for each closeup.

Move the cursor over the case until a popup image appears – when you first stop moving the cursor over a popup, a small title box appears for that popup. The top-left corner of a popup covers the top left corner of the original area that is being expanded. To see the original image without any popup, move the cursor off of the case image. For best results, scroll this page so the following small case image is at the top of the browser window, followed by an empty space – enlarge your browser window until you see a bit of what follows the empty space.

Case 1
Case 1, Image 1.
Case 1, Image 2.
Case 1, Image 3.
Case 1, Image 4.
Case 1, Image 5.
Case 1, Image 6a.
Case 1, Image 6b.

Here is the image of the second case, with expanded views of items as the cursor hovers over each.

Case 2
Case 2, Image 1.
Case 2, Image 2.
Case 2, Image 3.
Case 2, Image 4.
Case 2, Image 5.
Case 2, Image 6.
Case 2, Image 7.
Case 2, Image 8.

Here is the image of the third case, with expanded views of items as the cursor hovers over each.

Case 3
Case 3, Image 1.
Case 3, Image 2.
Case 3, Image 3.
Case 3, Image 4.
Case 3, Image 5.
Case 3, Image 6.
Case 3, Image 7.
Case 3, Image 8.
Case 3, Image 9.
Case 3, Image 10.


  1. See Experiment 1b to see each expanded view appear just to the right of each full-case image. The blank space between consecutive full-case images is removed.


  1. Each ANA-provided case has internal dimensions of a little over 32 inches horizontally and 20 inches vertically, but to be conservative and allow for locks and other items that might get in the way, use a working size of 32 by 20 inches.
  2. The original images were taken with a Samsung S9 Smartphone. Each original image was saved as a .jpg file, of size between 3.5 and 5.5 million bytes. Each original image had a width of 4032 pixels and a height of 3024 pixels, giving an aspect ratio value of 1.333.
  3. To give each case image an aspect ration of 1.6 (the same as a case’s aspect ratio), the original image for each case must first be cropped to a standard size of 4032 pixels wide by 2520 pixels high. (The width of each image, at 4032 pixels, was already an integer multiple of 1.6, so the height of each image was significantly reduced to 2520 pixels to give the desired aspect ratio of exactly 1.6.)
  4. The expanded views do not follow a uniform scale – a tall item located low in a case will be expanded less than an item of equal height that is located high in a case.
  5. With this latest version, the expanded views do not extend past the blank space, leaving the following case or text uncovered.

Note: After we have developed a method capable of producing acceptable webpages, we might consider investigating methods which implement different paradigms (such as magnifying the area of a case which is centered around the current cursor position, or having the expanded views cover as little of the case image). Emphasis on the word might.