how to | rotate sidebar images randomly with each pageload

This tutorial and script will show you how to rotate a group of images or banners in your sidebar. The code takes a block of images you've created ahead of time, displays them in a columnar format down your sidebar and randomly swaps the positions of each image with each pageload. Each image will also be linked to a website you designate. The code is written in javascript, so it should work with any blog or web platform, but I've only used it in my typepad blogs. This is a crazy-useful tool for a virtual cornucopia of applications! Ideas runneth over...

***This tutorial will not show-up correctly via a blogreader***

To see how code works, refresh this page now to see how the 3 images above change places. Or, to see a more extensive & exciting example, look at the Daisy Janie Fabrics list in my rightmost sidebar. Each image in these examples is linked to a website that will open in a new window.

- - - - - - - - - - - - - - - - - - - -

PLEASE NOTE: If you DON'T know how html or javascript languages work, I would recommend finding someone to help you install this code. It may or may not work based upon your particular blog settings, and I cannot offer tech support to problem solve issues that might arise after installation. If you DO know how to work with html and javascript, then this code will be easy for you to decipher and put to use! This is a code I dug up 3 years ago from a webdeveloper site, and I fine-tuned it for my purposes. Gotta want it!

Step-by-Step:
1. Create your images. They must be static jpgs or gifs.
2. Upload your images to either your blog's file manager or another webhost you might have.

3. Click Here to select the code below. Use Ctrl-C to copy it to your clipboard. For a typepad blog, paste this code into the 'note' section of a new 'Notes' typelist. For blogger or wordpress, this would be a new sidebar gadget or widget...I think.

<script language="Javascript" type="text/JavaScript"> var adblock = new Array() adblock[0]='<a href="http://www.yourwebsite.com" target="_blank"><img src="http://www.your_blog/your_img_1.jpg" alt="your alt tag" title="your image title" border="0"></a>' adblock[1]='<a href="http://www.yourwebsite.com" target="_blank"><img src="http://www.your_blog/your_img_2.jpg" alt="your alt tag" title="your image title" border="0"></a>' adblock[2]='<a href="http://www.yourwebsite.com" target="_blank"><img src="http://www.your_blog/your_img_3.jpg" alt="your alt tag" title="your image title" border="0"></a>' function randomorder(targetarray, spacing){ var randomorder=new Array() var the_one var z=0 for (i=0;i<targetarray.length;i++) randomorder[i]=i while (z<targetarray.length){ the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ document.write(targetarray[the_one]+spacing) targetarray[the_one]="_selected!" z++ } } } </script> <script language="Javascript" type="text/javascript" ></script> <div align="center"> <script> randomorder(adblock, '<br><br>') </script> </div>

4. The adblock section of the code is the ONLY section you will need to edit. Do so accordingly:

a href="______"	[website where readers will go when clicking on your image]
target="_blank"	[tells your link to open in a new window]
img src="_____"	[url address of each image you uploaded]
alt="_________"	[alternate name of your image if image fails to load]
title="_______"	[title of image seen when hovering over image]
border="0"	[no border around linked image]

5. You can add more adblocks by following the pattern & continuing the number sequence as shown. adblock[2]...adblock[3]...adblock[4]... Your sequence must always start with adblock[0]

6. Once you have your adblocks edited, save your typelist, gadget or widget. Add this item as you would any other to your sidebar. Done!

Couple of things to keep in mind:
* If you edit this code in wordprocessing software before adding it to your blog, save it as plain text so it doesn't auto-format the characters. Specifically, watch out for smart quotes!
* Each adblock must be contained on one line; it may naturally wrap in your blog's notebox, but it may not have any hardcoded breaks in the line or it won't work.

Please leave a comment with a link if you use the script - would be nice for everyone to see how it can be used!