Image Comparison
Activity Type

Description

This activity can be used to compare, contrast or overlay one image over another, allowing a user to interactively decide how much of each image they would like to see. You can also add ‘Look Closer’ buttons to highlight specific areas of the image. If you only need basic image annotation to highlight a specimen or a point on a map, and not a full comparison, the Annotated Image activity type may be more applicable. 

Features

subdirectory_arrow_right

Image Format

This activity type supports jpg and png image files.

subdirectory_arrow_right

Visual Differential

Interactively drag a slider to view different amounts of each image. 

subdirectory_arrow_right

Scale to Fit

The image can be scaled to fit the size of the window. This will use a CSS transform to the entire activity container, resulting in the Look Closer buttons scaling proportionally. 

subdirectory_arrow_right

Labels

There is a label button in the bottom left corner that can be opened to display a rich text description. 

subdirectory_arrow_right

Look Closer

Look Closer buttons can be placed on the activity canvas and, when pressed, will display rich text or multimedia.  They can be always displayed, toggleable through a button, or made invisible for integration into an image.

Examples

label

Who's Eating Who?

This activity shows different animals that can be found in Hanford Reach. The visitor is invited to drag the divider to view a rudimentary food web connecting all the animals. Each animal can also be clicked on, opening a Look Closer view with more information. 

label

Parts of a Sketch

This activity illustrates the different qualities of a good scientific sketch and one that needs improvement. 

label

X-Ray Vision

This activity overlays the skeletal anatomy of a house cat. 

label

Spot The Difference

This activity imposes a Chinook salmon over a Sockeye salmon for the visitor to spot the diferences. 

Resources

javascript

TwentyTwenty

This activity type uses the TwentyTwenty library to compare two images.

info

Activity Guide

We offer a wiki guide you can follow to create an interactive using this activity type.

assignment

Draft Template

We provide a template in the Open Document Format that can be used with word processors to draft the language and media for this activities before they are coded.

code

Code Editor

We host an interactive JSON editor that can be used to input activity data, then download the completed JSON template.

Community