Too Many Spocks

Examine the photo and decide which one of the Spocks is the original.
Then click the photo to see all the original faces.
In case you are not familiar with Star Trek,
maybe you wish to watch this video.

Pictures on Pictures

By placing pictures on top of other pictures, we can achieve some interesting
interactive results. The example above is very simple - it consists of two images
that are identical except for the faces. The extra Spock faces were inserted
using GIMP. So there are two almost identical pictures.

We can create more interesting interactions by cutting out a face and then
placing a copy of the face above another face in the picture. Then we
can make the extra face disappear when it is clicked. Like the Kirk faces here:

That is the right idea, but:
- the extra face needs to be cut out more carefully
- the extra faces must be positioned just right
- the extra face needs to be surrounded by a transparent background

A good tool for cutting out faces is Lunapic.com

To make the extra faces appear ON TOP of the big picture,
you must code the big <img> first, followed by all
the extra faces.

Here is the code from the FIRST example at the top of the page (the Spocks picture):

Practice

Changing faces
- Get a picture with lots of faces.
- Get another picture of a new face.
- Cut out the newDisappearing face and make the surrounding background transparent
   - you probably need to save it as a GIF to make the transparent background work
- Put the original picture in a web-page.
- Put the new face in the web-page, make it movable and place it on top of the big picture.
- Add JavaScript that makes the new face disappear when it is clicked.
- Get another face. Change the web-page so that when you click the new face
    it changes to the newer face.
- Take one of the existing faces in the big picture.
   Cut out a copy and save it.
   Place a copy of the face EXACTLY ON TOP of the original face in your web-page.
   Change the face to a funny face - draw a mustache or beard or funny eyes.
   Change the web-page so that when you click on the copy of the original face,
   it changes to the funny face.
- Add whatever you need so that when you click on a face,
    the program displays an ALERT message with the name of the person.
- Add whatever is needed so that when you click on another face,
    it jumps to another web-page.