Instructions

You can "animate" pictures by using setTimeout
combined with changing pictures by picture.src="name.jpg"

In this example, there is a bear picture
on top of the big picture. The small picture was
copied out of the big picture. There is a "left" (bear2.gif)
and a "right" (bear1.gif) version of the small picture.

The command bear.src="bear2.gif"
or bear.src="bear1.gif"
changes from one picture to the other.

The "dance" function uses lots of .setTimeout commands
to change from one picture to the other, over and over again.

This basic technique of using 2 pictures for an animation
looks kind of cheap but it can be funny as well.
For example, put a person's face (a big one) on the screen
then make the eyes get bigger and then smaller again.

Practice

(1) Start with this page. Put a SECOND Bear picture
on the page near the penguin.
Change the [left] and [right] buttons so
they change the second bear instead of the top bear.

(2) Make the "dance" too when the [Dance] button is clicked.

(3) On Google Images, find a .GIF image that has a transparent background
so it can sit on top of the ice picture without a surrounding box.
Put a copy of your picture on the page. Use width: and height:
to make it small enough for the picture.

(4) Use a graphics program to make left and right versions of your image from (3).
Now make your new picture turn left and right when the buttons are clicked.

(5) Add more pictures if time permits.