How to use Animated Graphics on Squidoo

I've been using animated graphics on quite a few of my Squidoo lenses. Since I started using the graphics, I've gotten quite a few messages and comments about them. I decided I should put up a little post about the animations.

I get most of the animated graphics I use from Magic Lantern Graphics. Note that due to the number of graphics they have, the pages load slowly. The animations are free. They do build web pages and have links to a variety of different services some may be interested in.

To use the animations you have to copy them to your computer. You do this by right clicking the animated graphic, save image as (or the like), and saving it to your pictures.

For the animation to work on Squidoo you must then upload the graphics to a hosting site. I like Photobucket, it's free. If you only upload the image from your computer to Squidoo the animation is a still picture.

Once you have your animations uploaded, html code is generated for them. After you get the html code, you can use it in a variety of modules on Squidoo: Text/Write, your bio, and in your module description boxes.

On Photobucket you are give 4 different code choices: Email/IM, Direct link, HTML, and IMG code. Of course you use the html for Squidoo. The html code looks something like this:

< href="http://the photobucket URL .jpg" target="_blank">< src="http://the photobucket URL .jpg" border="0" alt="Photobucket"> < /a >

If you want your new animation to link to something, like your Squidoo referral link, then you replace the http in the a href tag with your Squidoo referral link. Your code will then look something like this:

< href=" http://www.squidoo.com/lensmaster/referral/Eclectic_Muse " target="_blank">< src="http://the photobucket URL .jpg" border="0" alt="Photobucket"> < /a >

Note I have spaces throughout the example. Your working code will be space free. Call me lazy but I didn't take the time to create snapshots of the html code for illustration on this post. You can get some great html tips from N376, and beeobrian's lens HTML for Photos: A Tutorial for the Semi-clueless. I have some other HTML helpers linked in My Squidoo Cheat-Sheet, if you need more resources.

If you just want to have the animation without a link you remove the a href tag. You code will then look something like this:

< src="http://the photobucket URL .jpg" border="0" alt="Photobucket">

If you do not remove the a href tag, your animation will link back to your image on photobucket.

Here's some useful erroneous information for you:

• a href="URL" is your link tag
• img src="..." is you image tag
  
• target="_blank" opens your link in another window so your page still remains viewable by your reader.
• alt="Photobucket" is your image title. In IE when you hover your mouse over the image whatever is written in the alt tag is displayed. I like to change the alt tag to something related to my lens, to my keyword/keyword phrase, or to my URL.
  
• border="0" is the border around your image.

Check out how I used some of the animated graphics on the Mexican Food Group!

Squidoo To-Do:

1. Consider adding animated graphics to your lenses
2. Learn html and make it work to your advantage
3. Utilize free resources and give them kudos