How to Get Rotating Images on my Web Page and Place the Images Anywhere on the Page

Adding rotating images to your website can be accomplished with some basic knowledge of HTML and any GIF builder that can be found on the web. Many GIF builders specialize in allowing you to construct animated pics or rotating pics with the ease of following the steps in a wizard. Below I'll discuss the basics to building an animated GIF and review how to call the image on your website with some basic HTML code.

Instructions

Difficulty: Moderately Challenging

Things You’ll Need:

• GIF Builder (there are several free online versions available)
• The images that you want to rotate
• The ability to edit the HTML code on your website

1. First, you will need to find a GIF Builder. There are several free online versions, but I have always had better luck with downloaded software. They usually have better features and less errors than their online counterparts.
   
   I would start with a simple Google search for 'GIF Builders' or 'GIF Construction'. Be sure to browse through your options. Before you download anything or pay for software, be sure that you read the description thoroughly. Look for an Animation Wizard, or the ability to build animations listed in the features.
2. Once you have the software, we'll start building! I would suggest having all of the images that you want to add to your rotating animated GIF in one location so that they are easy to find.
   
   Open the program that you downloaded and open the animation wizard. In the software that I am using, it is located as an option in the File menu. Keep in mind that in your own software, this may not be the case. If you have trouble finding the wizard, try looking in the Help menu for more information or an ability to search Help topics.
3. Choose your Images In the Animation Wizard, you should have the option to locate the images that you want to add. This is where it will come in handy if you saved them all in the same folder. Then you don't have to dig around on your computer.
   
   I have all of the files that I want to rotate saved in a folder in my pictures. I will now select them all and add them to the animation in the order I want them to appear.
4. Once you have added all of the pictures into the Animation Wizard, you will have several other options to choose from that will control the look and feel of your animation. If you would like the images to loop continuously, be sure to choose the option to 'Loop'.
   
   Another option to look for is the 'Delay' or the time to display each image. If you are displaying your artwork or products on your web page, you don't want the image to rotate to quickly for your audience to enjoy each picture separately.
   
   However, if you are creating an animated image that will simulate movement, you want the images to move quickly enough to look as though it is a fluid motion.
   
   Keep in mind that most GIF Construction programs will give you the option to preview your animation. You may have to repeat the wizard several times to get the desired effect, but remember that in the end it will be worth it.
5. HTML Example Unfortunately, we have yet to get to the 'challenging' part. Building the animation is relatively easy, given the many options of software available. The difficult part is adding the image to your web page. Here I will provide an example of calling an image in HTML code.
   
   To call an image in HTML, the code looks for a tag telling it that you want it to display an image. The image shows an example of calling an image in HTML code.
   
   Let me explain this code to you. First the 'img' tag tells the web page that you are wanting to call an image here. Once you have opened a tag, you have the option of specifying attributes for that tag. The 'src' attribute is required, as it tells the web page where to find the image that you want to display. I also recommend including an 'alt' attribute. This attribute tells the web page what to display as an alternate to the image. If it cannot find the image, or your viewer's browser cannot display the image, the 'alt' attribute will display as text.
6. The image tag is only a part of the HTML you need to know to display your image anywhere on the page. HTML includes many different tags, including those calling tables, lists, divisions, frames, and many more, which of course can all be very confusing for those who have never worked with the code before. Before going through your website's code, I would recommend a basic online tutorial to get you started if you are a beginner. There is also software available, such as Dreamweaver or FrontPage, that allows you to build web pages and creates the code for you. These are great tools for beginners, but can have limitations on how the images are displayed on your web page.
   
   For those of you who may be more familiar with HTML, in order to display your image anywhere that you would like on the page, you can use the image call example provided in step 5 to display your image anywhere. Remember that the size of your image will effect the layout of the page, so keep that in mind when you are working with adding images to any HTML file.

Tips & Warnings

• All of the images that you add to the animation should be the same size. If you have different sizes, it will effect the layout on your web page, which may look unprofessional to your audience.