Javascript – Event Handler

This evening I researched Javascript Event Handlers and managed to construct a piece of script that successfully ‘reveals’ an image when a completely separate image, link, button or div is clicked.  This means that I can now apply this method to the project website so that the animated gif file is ‘revealed’ on the ‘screen’ once a projector icon is clicked.  I have no idea at this stage whether a) the gif will start at the beginning of the sequence once revealed, or b) whether the soundtrack will only be audible once the gif has been ‘revealed’ – as it is imperitive that the animation and soundtrack sequences only start once ‘revealed’ (i.e. display changed through javascript from ‘none’ to ‘block’).

The small bit of script I developed to achieve this is as follows. In this example, clicking on the button, image or div reveals an image:

The resulting demo can be viewed at


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test example - javascript event handler</title>

<script src="" type="text/javascript"></script>
function display_image()
document.getElementById("image_chris").style.display = 'block';

 #projector {
 #my_image_container img{



<div id = "projector">
 <img src = "images/projector.png" onclick = "display_image()"/> </a>
 <button id = "button_chris" onclick = "display_image()"> Click for Film </button>
<div id = "my_image_container">
 <img src = "images/Chris_Simon2.gif" id = "image_chris" alt = "short film" />


Showcase website – Timeline for animation

Below is a timeline to plan how the various animations & soundtrack will synchronize.  The times given (1 – 10) are not accurate at this stage, but more of an indicator of when the various aspects will start relative to each other:


Showcase website: Projector Icons

I create the below SVG image in Illustrator for the projectors:


However, the graphic lost some of it’s impact when placed onto a deep red background, so I decided to add an outer glow to the image which improved the effect:


I next need to work on turning this into an animated gif  – it will be animated in the following ways:

  • Reels will rotate
  • Light will change from red to green
  • A projection of light will appear

Showcase site – Meeting 07/05/2014

Date: 30th April 2014

Location: Brighton City College

Present: Chris Webb, Nathaly Laurence, Simon Wilson


During this meeting, Nathaly updated the group with the results of her research into creating Cinemagraphs.  All agreed that she created some excellent results, particularly with the ‘stirring coffee’ image.   Nathaly then gave the rest of the team an excellent tutorial on the subject, which is summarised below:

  • Open I-Movie
  • Import Movie
  • Add begin & end markers by dragging out the required section of film in the Event area
  • Drag selected area to copy to the Project area
  • Share > Export movie
  • Choose most appropriate size
  • Open Photoshop
  • Open saved movie
  • Ensure Timeline window is open (window > timeline)
  • Select required portion (start and end)
  • Duplicate layer at frame to be ‘fixed’
  • Ensure Video layer is on top
  • Select bottom layer > Layer > Rasterize > Video
  • Select top layer (video) > Use polygon tool to select area to have movement
  • Add a mask
  • Ensure layers are not in a group (otherwise you may not be able to save as ‘looping’
  • Save for web > GIF > Looping = forever

We spent some time as a group taking sort films which Nathaly then used to create animated Cinemagraphs using the above method.

Below is one of the resulting Cinemagraphs – a tender moment!





Showcase Site – Meeting 30/04/2014

Date: 30th April 2014

Location: Brighton City College

Present: Chris Webb, Nathaly Laurence, Simon Wilson

Absent: Chris’s laptop



  • Distribution of duties discussed:

o   Nathaly : Logo design, research animated gifs and cinemagraphs

o   Simon: Costings and budget, research embedded video and animation

o   Chris: Build framework for overall site in html & css, create projector icons (SVG), research Javascript event handlers for projectors, gantt project chart

  • Chris informed the group that he was currently without a laptop and it was unlikely that he would be able to progress with the project over the coming week


Project schedule / distribution of duties:



SHowcase site: Initial idea sketches

Sketch for landing page and horizontal scroll to “Projectors” section:


Sketches and ideas for “Projectors” section:


Ideas and considerations for Projector icons:


Ideas for ‘revealing’ projection light beam:


Sketches around the idea of having projectors at an angle (I abandoned the idea for angles projectors as I felt that it would be too complex for me to create an animated gif image from these):