Web Design Multi-Level Thumbnails

Point to a PCB to see it larger; click on it to see full size; click again to return to small size.

MSM3	RPM4	RPMD	SSH

WEB PAGE TECHNICAL DESCRIPTION

This page illustrates an advanced form of JavaScript rollover. In a typical JS rollover, when the mouse rolls over an image, that image is replaced by a different one of the same size. In this page, the replacement image is not the same size. Each image in this page is of a particular printed circuit board. Before any mouse action, the images are small thumbnails comprising a gallery. These load quickly and many can be placed on the same page. The resolution of these is so low that the viewer may not be sure of their identity. “Pointing” to one of these images by rolling the mouse over it causes a moderately larger image to replace the thumbnail. This may afford the viewer sufficient detail. However, if a more detailed view is needed, clicking the mouse on this intermediate image causes a full-size image of the PCB to be displayed. Clicking this image restores the original thumbnail. This is essentially a three-level gallery. The standard gallery comprises one level; clicking on a thumbnail opens another page to display the selected content. The three-level gallery is easier to use and faster, especially at the low-to-moderate detail transition level.

Although the browser can enlarge and shrink images, this capability is not used. This page loads quickly because the initial images are small. Loading a large image into a small space actually takes longer than loading it into an unconstrained space, while enlarging an image only replicates pixels without increasing resolution. Therefore, each of the three sizes is a separate, individually optimized JPG file. Even the full-size image files are considerably smaller than the original (as scanned) images but the intermediate and thumbnail files are especially small. Different degrees of optimization account for compression discrepancies, for example the full-size MSM3 reduction from 2.8M to 100K (3.6%) compared to the RPM4 reduction from 1.7M to 136K (8%). The MSM3 image has considerably more artifacts than the RPM4. The RPM4 image quality is excellent whereas that of the MSM3 is barely acceptable.

The page would load very quickly if only the small thumbnail images were loaded. However, as is typical with JS rollovers, the rollover images are also loaded, but not displayed, when the page loads. Otherwise, loading the intermediate image would significantly slow the rollover response, potentially confusing the viewer. A small script in the head of the page file loads all of the intermediate images by creating a new Image for each file. The onMouseOver script for each embedded (in HTML) img assigns the associated new Image reference to the img object's src. At onMouseOut the thumbnail src is restored.

<script >
  ( xMsm = new Image( 277, 387 )).src = "pcbs/msm3-17.jpg";
  ( xRpm4 = new Image( 160, 396 )).src = "pcbs/rpm4-17.jpg";
  ( xRpmd = new Image( 155, 219 )).src = "pcbs/rpmd-17.jpg";
  ( xSsh = new Image( 183, 275 )).src = "pcbs/ssh-17.jpg";
</script>

<td><img src="pcbs/msm3-5.jpg" 
  id="msmimg"
  alt="MSM3 PCB Thumbnail"
  title = "MSM3: Motor and Sample handling Module"
  onMouseOut="msmimg.src = 'pcbs/msm3-5.jpg'; return true;"
  onMouseOver="msmimg.src = xMsm.src; return true;"
  onclick="maximg.src = 'pcbs/msm3-100.jpg'; return true;" /></td>

<table>
<tr align="left"><td colspan="4">
<img src="x.gif" alt="" 
  id="maximg" 
  onclick="maximg.src = 'x.gif';" />
<tr align="center">
<td>MSM3</td>
<td>RPM4</td>
<td>RPMD</td>
<td>SSH</td>
</tr>
<tr align="center" valign="top">

The four images occupy adjacent cells in one row of a table in this page. The table serves primarily to keep the images aligned with their headings, which occupy the corresponding cells in the row above. Secondarily, the table supports the full size image display by providing an existing element for attaching the large image when the viewer clicks on its intermediate image. Each full-size image is larger than the browser window. Replacing the src of a thumbnail toward the center of the page would leave the thumbnails toward the left occupying window space that would be more effectively used by the one large image. Instead, the top row of the table, spanning four columns but normally occupied by a single transparent pixel (x.gif) provides the docking point for the large image. When the viewer clicks in the intermediate image, that image is not replaced but seems to disappear along with the others because they are all moved down when the large image replaces the transparent pixel in the top row. The previous state can be restored without any historical knowledge simply by restoring the transparent pixel image in the top image's onClick. Coincidentally, the window is scrolled to the top to avoid the restored page being scrolled to the virtual position of the cursor while the user moved it around the expanded image.