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

The original image we'll turn into an animated gif.

Want a rotating image or animated GIF to appear anywhere on your web page? There are sites abundant on the web to make this easy for you.

Things You'll Need

• Images, which you can create yourself, or find - also abundant on the web - without violating anyone's copyright.
• The sites you'll find in this article.

Instructions

1. 

   Creating rotating or animated GIF files and placing them anywhere you want on your web pages is a lot easier than it seems - especially as web sites bloom all over the Internet to help you do it. It used to be that you'd need to download software - now all you have to do is find a site, upload your images, do a few steps, and in no time, you've got the image you want.

   You can even find lots of images, too - and if you're careful to look in the right places, you'll find images that are fair to use, without fear of violating anyone's copyright.

2. 

   A Google search for "online animated GIF builder" will turn up several good resources - but I've already found one terrific resource for you, so unless you want more, you can just keep that in mind.

3. 

   If you have images you know you want to work with - GREAT. Get them ready, in GIF form. Make sure they are all the same size. If you don't have images, then you'll need to find some. Here are some resources for GIFs.

   The Animation Factory. This is a premium site, which means it costs money - but the GIFs are nice.
   http://www.animationfactory.com/en/

   Gif Animations.com has both free and professional animations.
   http://www.gifanimations.com/

   Web Developer.com has an animations section - as well as tutorials for building web sites.
   http://www.webdeveloper.com/animations/

   Best Animations has a high-falutin' name - but they have a lot to offer.
   http://bestanimations.com/

   This site - "Free Fever" has almost 18,000 available. Keep in mind, though - quantity isn't always the same as quality.
   http://www.freefever.com/animations/

   This related site has 6,000, organized by topic and holiday.
   http://www.freefever.com/animatedgifs/

4. 

   Once you've chosen a GIF, It's relatively simple to place it on your site. If you are a PC user, you can simply choose the GIF from the page, right-click, and "Save Target As" to a location on your computer. (Mac users: "Save image as.") If you have a web site that you've created, the best place to save it would be into the "images" folder nested within the web site folder that you've created for your site.

5. 

   OR: some sites allow you to link to your graphic from their site. If you maintain a blog, rather than a full-blown web site, this may be an option for you.

   The online GIF creator sites, once you have completed processing your images, provide the code in boxes for you to copy and paste right into your page, in any spot you want.

6. To place the code on your web page or blog, you need to find the "source code." This would be the HTML. If you are using a web authoring tool, like Dreamweaver or FrontPage, which allows you to view the HTML AND the web page at the same time, the easiest way to "find your place" in the source code is to highlight (double-click) the area around where you want to insert the animated GIF.

   For instance, if you wanted to insert the butterfly next to your name on the page, highlight your name. It should ALSO become highlighted in the source code, as well.

   That will make it much easier to "find your place" in the HTML code, if you are unfamiliar with HTML.

7. 

   To place the GIF image, make sure that you place it IN BETWEEN TAGS. Tags, in HTML, are letters that are enclosed in "greater than" and "less than" signs, typed by holding the shift key down and pressing the comma and period keys.

   Spaces do not matter in HTML. So you can find an end tag - it will have a / in it - and hit the return key several times, to give you plenty of space to paste in your GIF.

   This way you will not accidentally paste over important existing code.

8. 

   You can place the code for your new GIF anywhere on the page, in between any part of the code. Once you've pasted it in, if you don't like where it is, simply delete it and try it somewhere else.

9. 

   The best site out of all the different ones I tried, looking for a good online GIF builder seemed to be Gickr, It was the easiest to use, and generated both kinds of "code" - a link for you to paste into a blog-style page, and HTML for you to paste into a web page.

   Here is the link for Gickr.com:

   http://gickr.com/

   Right now, you can only use your own photos with Gickr.com, but apparently they are working with Flickr.com so that you can use your Flick.com photos, eventually.

10. 

    Another good GIF builder I found was at http://www.gifworks.com/

    They have many options for you to enhance a GIF file, and it is VERY easy to use. You can make your own 3-D Text, or mess around with an image of your own. It's pretty fun, actually.

11. 

    Here is how I manipulated the image you saw at the beginning of this article, using GifWorks, at http://www.gifworks.com/

12. So rotating or moving pictures - anywhere you want them to be on your web page - are really not that hard at all - especially with so many sites on the web to help you out. GIve it a try!

Tips & Warnings

• Always keep in mind to look for pictures that are FREE to use, or are under what is called the Creative Commons license. Otherwise, you might be violating someone's "intellectual property rights." Although it is commonly done - people steal other people's images all the time - it is actually a crime, not to mention a crummy thing to do. There is more than enough material out there given away for free.

• Take great care to save your original web pages or blog pages BEFORE you start messing around with them, particularly when you are starting out. This way, if you make a mistake, it's not the end of the world.

• Also: be aware that "royalty-free" is not the same as "free, doesn't cost anything." Royalty-free simply means you pay once, and don't have to pay the image owner again and again each time you use the image. Beware.