The Overlay functionality of the Zoomify Image Viewer can be customized and controlled using functions such as those demonstrated in this example. The buttons above demonstrate functions that hide and show individual overlays, change the image displayed, and change their opacity (transparency).

View the source of this example web page to see calls to the functions setOpacity, setVisibility, and setImage. The simple JavaScript in this page also provides a template for toggling visibility, toggling the image displayed, and tracking opacity to increment or decrement it cummulatively. For more information, see the Function List in the Documentation folder.

Description of content: This example, displays five different PNG images of the sun: the orange image is used as a base image. The green and blue filter images are overlays on the left and right sides of the display, respectively. Note that these two images are actually full-width, they simply have fully transparent halves. There is also an alternate right overlay that has a purple filter that can be displayed using the Toggle Overlay 2 button. It is also half transparent. And there is one additional image, a full-width map of sunspots which can be displayed using the Toggle Overlay 1 button. This large collection of alternatives demonstrates the many ways that overlays can be used to display compatible image information. Images courtesy NASA/SDO.