Bruce's Web Lab

Simple Animation with GIF Images



Simple animation can be placed in your web pages with no programming, by using the multi-layered capability of the GIF image file format. The The Gallery of GIF Animation has some great examples and instructions.

Following the ideas mentioned under Color Points, you can make very small animated images and size them using the WIDTH and HEIGHT attributes of the <IMG ... > element. The following image, , has an actual size of 20 pixels wide by 3 pixels high, with a twenty-step animation of a black pixel moving the length of the turquoise background. The same image file can be used as a horizontal rule by sizing it 600 pixels wide by 2 high, as follows:

which was done with the following tag*:
<IMG SRC="images/tube-00.gif" WIDTH=600 HEIGHT=2>

It's also possible to assemble more complex animated images from small components. The following was created from the same small image used above, with four variations that have successively longer delay times after the first frame, so they "fire" sequentially. These images have been assembled in groups using the HTML <TABLE> structure.













The above assemblage has the following HTML*:

<CENTER><TABLE>
<TR>
<TD>
<IMG SRC="images/tube-00.gif" WIDTH=100 HEIGHT=3>
</TD>
<TD>
<IMG SRC="images/tube-01.gif" WIDTH=50 HEIGHT=12><BR>
<IMG SRC="images/tube-01.gif" WIDTH=50 HEIGHT=12><BR>
</TD>
<TD>
<IMG SRC="images/tube-02.gif" WIDTH=100 HEIGHT=3><BR><BR>
<IMG SRC="images/tube-02.gif" WIDTH=100 HEIGHT=3>
</TD>
<TD>
<IMG SRC="images/tube-03.gif" WIDTH=50 HEIGHT=12><BR>
<IMG SRC="images/tube-03.gif" WIDTH=50 HEIGHT=12><BR>
<IMG SRC="images/tube-03.gif" WIDTH=50 HEIGHT=12><BR>
</TD>
<TD>
<IMG SRC="images/tube-04.gif" WIDTH=100 HEIGHT=3><BR><BR>
<IMG SRC="images/tube-04.gif" WIDTH=100 HEIGHT=3><BR><BR>
<IMG SRC="images/tube-04.gif" WIDTH=100 HEIGHT=3>
</TD>
</TR>
</TABLE></CENTER>


It's up to you to make these tricks useful in your web pages.

*Note that all of the above HTML image references are to image files located in a directory (folder) named "images," which is in the same directory as the HTML file the above code would appear in. This is why you see <IMG SRC="images/tube-04.gif"... You don't have to put your images in a separate directory; it's just convenient when there are lots of images in your site.




[Back to the Web Lab Home Page] [Ask Bruce]