Click through the pictures

Original Comic  -  Instructions are below this picture

Instructions

This page uses JavaScript to control the clicks, so that it clicks through all 6 pictures.

NUMBER

The number variable is used to count through the pictures.
It starts with 1.  When the picture is clicked, the number variable adds 1:

         number = number + 1 ;

After 6 clicks, number would equal 7 - but there is no picture #7. 

So the if.. command checks whether number is greater than 6 -
if so, it changes it back to 1 :

    if(number > 6)
    {
       number = 1;
    }

PHOTO

After changing the number, the program must change the PHOTO source.

    photo.src = "frame" + number + ".jpg";

This changes the photo source, so it displays a different image.

The 6 images are named:   frame1.jpg , frame2.jpg , frame3.jpg ...  frame6.jpg

The command "builds" a STRING which is the name of the next image.
Since number is different each time, this displays a different image each time.

== PRACTICE ==

(1) Find a similar comic strip -use Google to search for Images that contain comics.
      Use ipiccy.com (or some other graphics editor) to cut the comic strip into pieces.
      Save your new images as frame1.jpg, frame2.jpg,...  replacing the original images.
      If you have a different number of images, you will need to change the JavaScript function

(2) Add another STACK of pictures.  Use style="position:absolute....." to place your stack
      next to the original stack.   You need to put the new images in the same folder,
      but use different names, like  image1.jpg , image2.jpg ....
      You need to write a new <img> command.  You also need to add another
       JavaScript function that responds when the second stack is clicked.