Interactive Media

Anxiety & the Fight or Flight Response

interactive_anxiety_detail1

This interactive illustration is intended as patient education. It is comparing the physical symptoms of an anxiety attack or chronic anxiety disorders with the changes in our body during the ” flight or fight” response. The purpose of this illustration is to give patients information about where the physical symptoms of anxiety disorders come from.

The interactivity was created using Html, CSS, and Javascript. It uses image maps and javascript image swaps through the Jquery library. The code I used was based on an example by Prof. Micheal Corrin in the Biomedical Communications program at the University of Toronto,  that can be viewed here. I used Prof. Corrin’s code and modified it so that instead of the image description fading out on mouseout, the description and structure highlight would stick until the user clicked on a different structure.

I also wanted the user to be able to hover on the illustration to see clickable areas so I used a separate set of divs that call on the same highlight images to display on mouseover and hide on mouse out.

Open the interactive illustration.